vue 可合并表格组件_Element-UI el-table 表格动态合并行和列

前言

示例版本为 Element-UI 2.13.2 + Vue 2.6.11

由于项目业务需求，最近写了一个可以自动合并行、列的表格组件，对数据格式有一定的要求性。

Element-UI 提供了表格内容可以合并的示例，但是复杂一些的功能还是需要自己完成，在写组件之前查找了相关资料，并没有发现相关的示例，故分享一下。

预设数据

组件在定义之前需要提前预设几个属性：

tableData：表格中的数据

colConfigs：表格列的内容信息

mergeColumns：要合并的列信息

tableData

示例中的数据格式：

[

{ time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '语文' },

{ time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '数学' },

{ time: '2020-08-10', grade: '总成绩', name: '总成绩', subjects: '总成绩' },

{ time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '语文' },

{ time: '2020-08-10', gra