当前位置: 首页 > Web前端 > vue.js

【报表设计】100行代码搞定功能齐全的报表页面,心动不?

时间:2023-03-31 23:37:46 vue.js

使用文档地址:http://43.143.54.159/github地址:https://github.com/hunan-liy/...ReportDesign是一个基于ElementUI扩展的Vue开源组件库,由dataView,通过简单的配置生成一个完整的页面,主要包括Form表单、Table表格、Report报表和DialogSelect弹窗选择器组件,主要解决开发过程中的以下痛点:样式不一致:尤其是管理后台项目中,对于大部分页面来说,风格基本是统一的,但是在实际开发过程中,即使使用ElementUI,由于协同开发,每个人写的页面可能都不一样,但是对于管理后台页面,如果UI设计起草成本太高,所以我们使用组件来统一页面风格,保证每个开发者写的页面保持一致的风格。功能遗漏:在开发过程中其实很容易出现细节功能的遗漏,比如Form表单的校验、占位符文本、Report页面的分页输入参数错误、缺少条件查询字段、无法切换到firstpageafterquery等等,虽然在提交测试过程中会发现并解决这些细节问题,但是我们为什么不从根本上避免这种错误呢?通过使用组件,比如Report组件,开发者只需要关注页面需要哪些查询条件,需要展示哪些字段即可。所有的接口请求都封装在组件内部,减少底层功能缺失的几率。开发效率:正常开发需要查询条件、分页、排序功能的报表页面需要多长时间?很久?2小时?1小时?不会,只要你复制粘贴的速度够快,10分钟就够了!因为每个页面需要的配置基本一致,所以我们定义了开发模板,对比接口文档复制粘贴需要展示的字段的标签和prop,以及接口地址。10分钟开发一个简单的报表页面就够了。生成这样一个页面只需要100行代码,轻松搞定!本组件库结合作者工作经验,重组后独立开发。如果您发现其中有什么不足之处,欢迎指导。