关于vue.js:ReportDesign100行代码搞定一个功能完整的报表页你不心动吗

34次阅读

共计 793 个字符,预计需要花费 2 分钟才能阅读完成。

应用文档地址:http://43.143.54.159/

github 地址:https://github.com/hunan-liy/…

ReportDesign 是一款基于 ElementUI 进行扩大的 Vue 开源组件库,以数据驱动视图,通过简略的配置生成一个残缺的页面,次要蕴含 Form 表单、Table 表格、Report 报表和 DialogSelect 弹窗选择器组件,次要解决开发过程中以下痛点:

格调不对立:

尤其是在治理后盾的我的项目中,对于大部分页面,格调其实根本是对立的,然而开理论开发过程中,就算应用了 ElementUI,因为合作开发,可能每个人写进去的页面都有差别,然而对于治理后盾页面如果叫 UI 出设计稿又太节约老本了,所以咱们通过组件的形式对立页面格调,保障每个开发人员写出的页面都保持一致的格调。

性能脱漏:

细节性能脱漏其实在开发过程中很容易呈现,如 Form 表单的校验、占位文字,Report 页面的分页入参谬误、条件查问字段漏传、查问后分页没有切换到第一页等,这些细节问题尽管在提交测试过程中最初会被发现并解决,然而为什么咱们不从根本上防止这种谬误的呈现呢?通过应用组件的形式,如 Report 报表组件,开发人员只用关注页面须要哪些查问条件,须要展现哪些字段就行,接口申请全副封装在组件外部去做,缩小呈现低级性能脱漏问题的几率。

开发效率:

失常开发一个须要查问条件、须要分页、须要排序功能的报表页面须要多久?半天?2 个小时?1 个小时?不,只有你复制粘贴的够快,10 分钟就够了!因为每个页面须要的配置根本始终,咱们定义好开发模板,对照的接口文档将须要展现的字段的 label 和 prop 以及接口地址复制粘贴替换掉,10 分钟开发一个简略报表页齐全足够。

生成这样的一个页面只须要 100 行代码,轻松搞定!

该组件库是联合作者工作教训,重新整理后独立开发实现,各位同行如有发现其中不足之处,欢送领导。

正文完
 0