系统定制开发我们在开发中最常见的就是表格，系统定制开发而往往有一些复杂表格系统定制开发都不大好实现，系统定制开发对于合并单元格不是固定的，系统定制开发而是需要根据数据是否系统定制开发相同去动态设置合并的表格，本文把方法分享给大家，可以根据数据动态生成合并单元格，无论导出需求还是显示需求都不需要发愁了。
一. 使用element的span-method方法实现合并
1. 首先绘制表格，绑定合并方法:span-method=“objectSpanMethod4”
<!-- 列的合并 --> <el-table ref="tableDD4" id="tableDD4" :data="tableData4" :span-method="objectSpanMethod" max-height="600" border> <el-table-column label="一级表头" align="left"> <el-table-column label="二级表头1" prop="firstCatalogue" align="left" width="300" /> <el-table-column label="二级表头2" prop="secondCatalogue" align="left" /> <el-table-column label="二级表头3" prop="insuranceName" align="left" width="140" /> <el-table-column label="二级表头4" prop="isMatch" align="left" width="130" /> </el-table-column> </el-table>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
首先设置变量margeArray4，用来存储(）方法计算出来的每一列单元格合并列数
rowspan（）方法详细介绍
index === 0，第一行，直接先给数组 push 进一个1，表示自己先占一行，position 是数组元素的位置（此时是从数组元素的第一个开始，所以position 为 0）， position为 0 意思表示的就是数组的第一个元素 index 为 2 的时候，让第二行与第一行作比较：（1）如果第二行与第一行相等的话，spanArr[position] 就 +1，当有 n 行第一行相同，spanArr[position] 就为 n，表示向下合并 n 行；第二行自己就 spanArr.push(0)，表示第二行“消失”，因为第一行和第二行合并了；（2）如果第二行与第一行不相等的话，那么 spanArr.push(1);就让第二行自己独占一行；更新position = index ：把指针拿到 index 这行来，用来设置数组 spanArr[position] 的合并情况元素值，然后定义从此行开始向下合并几行- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
data() { return { //接收后端数据 tableData1: [], //存储每一列合并行以及下标数据 margeArray: [], }}, - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
rowspan(tableData, spanArr, position, spanName) { tableData.forEach((item, index) => { if (index === 0) { spanArr.push(1); position = 0; } else { if (tableData[index][spanName] === tableData[index - 1][spanName]) { spanArr[position] += 1; spanArr.push(0); } else { spanArr.push(1); position = index; } } });},- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
objectSpanMethod方法的实现：
// 表格合并行 objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 计算一共有几列数据 let arraynum = Object.keys(this.tableData1[0]).length for (let i = 0; i < 2; i++) { if (columnIndex == i) { const _row = this.margeArray[i].Arr[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col, }; } }},- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
数据之后，调用计算合并行，实现合并
//此处是我封装好的请求方法，你自己的实际情况修改即可 this.$postRequest('/basicSystem/export/sheet1', { year: this.year }).then(({ data }) => { //判断请求状态为success/false，请求成功，处理数据，否则输出错误信息 if (data && data.type === 'success') { //接收后端返回的数据 this.tableData1 = data.data //开始 调用方法计算需要合并的数据 for (let i = 0; i < Object.keys(this.tableData1[0]).length; i++) { // 首先添加一个存放合并行数据的变量 this.margeArray.push({ Arr: [], Position: 0, }) // 得到下标对应的key值 const element = Object.keys(this.tableData1[0])[i]; // 调用合并， this.rowspan(this.tableData1, this.margeArray[i].Arr, this.margeArray[i].Position, element); } } else { this.$message.error(data.message) } }).catch(error => { this.$message.error(error) })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
**
最后说一个很重要的点：
**
注意：此处因为是动态根据后端反的数据的key值去计算对应列的合并情况，所以必须！必须！必须！要保证后端返回的数据里key值顺序，要和前端table的展示顺序一直，否则合并会出错。**
举例：
前端页面table展示顺序：firstCatalogue为第一个，secondCatalogue为第二个以此类推
同样后端返回json数据中key顺序：firstCatalogue为第一个，secondCatalogue为第二个以此类