一、组件概览以及背景
在数据表格报表设计和医嘱任务表格设计的需求背景下，诞生了通用表格组件。该组件主要用于解决自定义表格的设计以及动态渲染，可支持较为灵活的自定义样式配置。该组件是报表表格组件的升级版，移除部分定制功能，将个性功能抽离支持扩展，保留公共的基础功能，以便于后续的扩展。
二、组件设计思路
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、组件页面效果图
四、组件功能
表格属性
表格初始化：输入行列，点击按钮生成表格
边框线粗细：整体表格的边框线粗细，内置三种线条粗细
高度自适应：在设计的表格未超过一屏高度时，开启高度自适应则会占满整个屏幕，未开启则是表格自身高度
单元格填充：整体表格的背景色，支持设置透明度
横向边框线：整体表格横线的颜色，支持设置透明度
纵向边框线：整体表格竖线的颜色，支持设透明度
文本颜色：整体表格的文字颜色
单元格属性
单元格宽度：调整选中单元格的宽度百分比
单元格高度：调整选中单元格的高度，单元格高度会自动根据内容撑高，如果设置高度大于内容高度，则以设置高度为准
单元格填充：调整选中单元格的背景色，优先级比表格属性高
下边框颜色：调整选中单元格的下边框颜色，支持设置透明度，优先级比表格属性的高
右边框颜色：调整选中单元格的右边框颜色，支持设置透明度，优先级比表格属性的高
文本颜色：调整选中单元格的文本颜色，支持设置透明度，优先级比表格属性的高
字体大小：调整选中单元格的字体大小，内置三种字体大小
水平对齐：调整选中单元格的水平对齐方式，内置居左、居中、居右
垂直对齐：调整选中单元格的垂直对齐方式，内置居上、居中、居下
字体样式：调整选中单元格内容的字体样式，支持加粗、斜体、下划线
五、其他
源码地址：https://gitee.com/zjh336/generalTable
在线体验：https://www.zjh336.cn/generalTable
发表评论