vue通用表格组件(generalTable),包含表格设计、表格渲染

原创  郑建华   2021-09-18   143人阅读  0 条评论

一、组件概览以及背景

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

二、组件设计思路

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

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

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

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

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

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

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

三、组件结构

1、目录结构图

├─GeneralTable   #通用表格组件
│  │  generalTableConstant.js  #配置常量
│  │  GeneralTableDesign.js  #组件注册文件
│  │  GeneralTableDesign.vue  #通用表格设计组件
│  │  GeneralTableRender.js #组件注册文件
│  │  GeneralTableRender.vue #通用表格渲染组件
│  │  generalTableUtils.js #表格工具方法
│  │
│  └─components
│      │  DataTree.vue	#数据树组件
│      │  evol-input.vue  #自定义输入框组件
│      │  TableProperties.vue  #表格属性组件
│      │  right-key-menu.vue   #右键菜单
│      │
│      ├─blendModeTable  #混合模式表格组件
│      │      blendTable.vue	#表格主体
│      │
│      └─easyModeTable #简易模式表格组件
│              easyTable.vue  #表格主体

表格设计组件:由三块区域组成,左侧数据区域(数据树组件)、中间表格区域(混合模式表格组件/简易模式表格组件,自定义输入框组件,右键菜单组件)、右侧表格属性区域(表格属性组件)

表格渲染组件:仅由表格区域组成(混合模式表格组件/简易模式表格组件,自定义输入框组件)

依赖组件部分:数据树组件、混合模式表格组件、简易模式表格组件、自定义输入框组件、右键菜单组件、表格属性组件

2、组件页面效果图

image.png

image.png

四、组件功能

    表格属性

    表格初始化:输入行列,点击按钮生成表格

    边框线粗细:整体表格的边框线粗细,内置三种线条粗细

    高度自适应:在设计的表格未超过一屏高度时,开启高度自适应则会占满整个屏幕,未开启则是表格自身高度

    单元格填充:整体表格的背景色,支持设置透明度

    横向边框线:整体表格横线的颜色,支持设置透明度

    纵向边框线:整体表格竖线的颜色,支持设透明度

    文本颜色:整体表格的文字颜色

    单元格属性

    单元格宽度:调整选中单元格的宽度百分比

    单元格高度:调整选中单元格的高度,单元格高度会自动根据内容撑高,如果设置高度大于内容高度,则以设置高度为准

    单元格填充:调整选中单元格的背景色,优先级比表格属性高

    下边框颜色:调整选中单元格的下边框颜色,支持设置透明度,优先级比表格属性的高

    右边框颜色:调整选中单元格的右边框颜色,支持设置透明度,优先级比表格属性的高

    文本颜色:调整选中单元格的文本颜色,支持设置透明度,优先级比表格属性的高

    字体大小:调整选中单元格的字体大小,内置三种字体大小

    水平对齐:调整选中单元格的水平对齐方式,内置居左、居中、居右

    垂直对齐:调整选中单元格的垂直对齐方式,内置居上、居中、居下

    字体样式:调整选中单元格内容的字体样式,支持加粗、斜体、下划线

五、其他

源码地址:https://gitee.com/zjh336/generalTable

在线体验:https://www.zjh336.cn/generalTable



本文地址:https://www.zjh336.cn/?id=2060
版权声明:本文为原创文章,版权归 郑建华 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?