所在的位置: js >> js市场 >> vue通用表格组件generalTab

vue通用表格组件generalTab

一、组件概览以及背景

在数据表格报表设计和医嘱任务表格设计的需求背景下,诞生了通用表格组件。该组件主要用于解决自定义表格的设计以及动态渲染,可支持较为灵活的自定义样式配置。该组件是报表表格组件的升级版,移除部分定制功能,将个性功能抽离支持扩展,保留公共的基础功能,以便于后续的扩展。

二、组件设计思路

1、核心思想:开发组件的目的就是提高开发效率,避免重复造轮子,将类似的功能通用化。

2、无论是数据报表,还是医嘱任务表格,又或者以后还有扩展需求,实际上都是先做表格设计,然后再做数据渲染。确定大方向,一个表格设计组件、一个表格渲染组件。

、表格设计也可以抽象,分为三个部分,一个表格的数据来源处理,一个表格内容处理,一个表格属性处理。

4、数据来源部分,可以采用两级的树结构,支持拖拽数据,以及支持扩展功能,如增加图标显示,绑定事件。

5、表格内容部分,需要支持两种模式,一种简易模式,一种混合模式,以应对不同需求。

6、表格属性部分,支持表格属性的配置,以及单元格式属性的配置,以及一些扩展属性的配置。

7、表格渲染,根据设计组件生成的配置渲染出表格外观,再根据数据接口填充数据。

三、组件结构

1、目录结构图

├─GeneralTable#通用表格组件││generalTableConstant.js#配置常量││GeneralTableDesign.js#组件注册文件││GeneralTableDesign.vue#通用表格设计组件││GeneralTableRender.js#组件注册文件││GeneralTableRender.vue#通用表格渲染组件││generalTableUtils.js#表格工具方法│││└─


转载请注明:http://www.aierlanlan.com/rzdk/2846.html

  • 上一篇文章:
  •   
  • 下一篇文章: