vue+element-ui后台系统实现可配置报表组件

背景:

目前在做的一个后台系统,因为投入市场使用,开始有很多数据报表需求。页面结构大同小异,所以想将其模块化,开发一个可复用的报表组件。因为是后台系统,样式只要求简介不乱就行。

组件主要分三个模块:

  • 条件查询区 + 按钮
  • 表格数据显示区
  • 分页条区域

查询条件和表格的列名通过配置传入,页面初始化时塞入配置。
表格具体动态数据一般是通过请求,如需二次封装在对应页面进行处理

组件代码






备注:因报表的标题行存在二级,后续对el-table-column做过相应的逻辑判断和代码调整。分页条里的page-sizes和layout参数放在全局变量,也可参考element api写死处理。代码的注释说明写的还是比较详细的,如有不明白的问题可留言

组件使用Demo

demo是一个普通报表,筛选条件仅时间区间框【仅可选昨日以前的日期】,列表无操作按钮仅数据展示,且无分页数据。后续扩展按照初始配置依样画葫芦即可!




效果预览

做完后可以用类似的思维进行表单的动态配置,单独table渲染的配置等

完...

你可能感兴趣的:(vue+element-ui后台系统实现可配置报表组件)