el-table表格动态合并行、合并行列及详解_el-table 合并行

<div class="table">
    <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
        <el-table-column prop="time" label="时间"></el-table-column>
        <el-table-column prop="grade" label="年级"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="subjects" label="科目"></el-table-column>
        <el-table-column prop="score" label="成绩"></el-table-column>
    </el-table>
</div>

## 2、合并行列


调整下数据，如下：

tableData: [
{ time: ‘2020-08-10’, grade: ‘三年二班’, name: ‘小明’, subjects: ‘语文’, score: 80 },
{ time: ‘2020-08-10’, grade: ‘三年二班’, name: ‘小明’, subjects: ‘数学’, score: 80 },
{ time: ‘2020-08-10’, grade: ‘总成绩’, name: ‘总成绩’, subjects: ‘总成绩’, score: 160 },
{ time: ‘2020-08-10’, grade: ‘三年一班’, name: ‘小雷’, subjects: ‘语文’, score: 70 },
{ time: ‘2020-08-10’, grade: ‘三年一班’, name: ‘小雷’, subjects: ‘数学’, score: 80 },
{ time: ‘2020-08-10’, grade: ‘总成绩’, name: ‘总成绩’, subjects: ‘总成绩’, score: 150 },
{ time: ‘2020-08-11’, grade: ‘三年三班’, name: ‘小花’, subjects: ‘语文’, score: 60 },
{ time: ‘2020-08-11’, grade: ‘三年三班’, name: ‘小花’, subjects: ‘数学’, score: 60 },
{ time: ‘2020-08-11’, grade: ‘总成绩’, name: ‘总成绩’, subjects: ‘总成绩’, score: 120 }
],

可以看到上面的数据多了一行总成绩，现在的数据在页面显示效果如下：


![在这里插入图片描述](https://img-blog.csdnimg.cn/aa3009a088584ad395d915ac26433622.png#pic_center)


可以看到**总成绩**的三个列并没有合并，并不是我们想要的效果，所以需要换一种思路来处理数据


页面的布局也有所调整，如下：

**tableData中的数据就是上面调整后的**，还需要声明的变量如下：

// 表格的信息 需要合并的需要放在 children 中
colConfigs: [
{
type: ‘label’,
children: [
{ prop: ‘time’, label: ‘时间’ },
{ prop: ‘grade’, label: ‘年级’ },
{ prop: ‘name’, label: ‘姓名’ },
{ prop: ‘subjects’, label: ‘科目’ },
{ prop: ‘score’, label: ‘成绩’ }
]
}
],
// 需要合并的行列信息
mergeCols: [
{ index: 0, name: ‘time’ },
{ index: 1, name: ‘grade’ },
{ index: 2, name: ‘name’ },
{ index: 3, name: ‘subjects’ },
{ index: 4, name: ‘score’ },
],
// 用来记录每一个单元格的下标
tableMergeIndex: [],

首先也需要处理数据，在`mounted`中调用数据初始化数据的方法，如下：

mounted() {
if(this.mergeCols.length > 0) {
this.newTableMergeData();
}
}

// newTableMergeData方法
newTableMergeData() {
for (let i = 0; i < this.tableData.length; i++) {
for (let j = 0; j < this.mergeCols.length; j++) {
// 初始化行、列坐标信息
let rowIndex = 1;
let columnIndex = 1;
// 比较横坐标左方的第一个元素
if (j > 0 && this.tableData[i][this.mergeCols[j][‘name’]] === this.tableData[i][this.mergeCols[j - 1][‘name’]]) {
columnIndex = 0;
}
// 比较纵坐标上方的第一个元素
if (i > 0 && this.tableData[i][this.mergeCols[j][‘name’]] === this.tableData[i - 1][this.mergeCols[j][‘name’]]) {
rowIndex = 0;
}
// 比较横坐标右方元素
if (columnIndex > 0) {
columnIndex = this.onColIndex(this.tableData[i], j, j + 1, 1, this.mergeCols.length);
}
// 比较纵坐标下方元素
if (rowIndex > 0) {
rowIndex = this.onRowIndex(this.tableData, i, i + 1, 1, this.mergeCols[j][‘name’]);
}
let key = this.mergeCols[j][‘index’] + ‘_’ + i;
this.tableMergeIndex[key] = [rowIndex, columnIndex];
}
}
},
/**
* 计算列坐标信息
* data 单元格所在行数据
* index 当前下标
* nextIndex 下一个元素坐标
* count 相同内容的数量
* maxLength 当前行的列总数
*/
onColIndex(data, index, nextIndex, count, maxLength) {
// 比较当前单元格中的数据与同一行之后的单元格是否相同
if (nextIndex < maxLength && data[this.mergeCols[index][‘name’]] === data[this.mergeCols[nextIndex][‘name’]]) {
return this.onColIndex(data, index, ++nextIndex, ++count, maxLength);
}
return count;
},
/**
* 计算行坐标信息
* data 表格总数据
* index 当前下标
* nextIndex 下一个元素坐标
* count 相同内容的数量
* name 数据的key
*/
onRowIndex(data, index, nextIndex, count, name) {
// 比较当前单元格中的数据与同一列之后的单元格是否相同
if (nextIndex < data.length && data[index][name] === data[nextIndex][name]) {
return this.onRowIndex(data, index, ++nextIndex, ++count, name);
}
return count;
}

数据处理好之后就可以调用objectSpanMethods方法了，如下：

objectSpanMethods({ row, column, rowIndex, columnIndex }) {
let key = columnIndex + ‘_’ + rowIndex;
if (this.tableMergeIndex[key]) {
return this.tableMergeIndex[key];
}
}

实现的效果图如下：


![在这里插入图片描述](https://img-blog.csdnimg.cn/a33774de02fe4d60b65df9952906a5f8.png#pic_center)  
 合并行列的完整代码如下：