效果图:
大致思路:el-table里添加合并行或列的计算方法span-method
<el-table :data="tableList" :span-method="objectSpanMethod">
// 在获取到列表数据tableData后调用此方法
handleTableData(tableData) {
let rowSpanArr = [], position = 0;
for (let [index, item] of tableData.entries()) {
if (index === 0) {
rowSpanArr.push(1);
position = 0;
} else {
// 此处判断userName相同时进行合并,需要替换自己的属性名
if (item.userName === tableData[index - 1].userName) {
rowSpanArr[position] += 1; //名称相同,合并到同一个数组中
rowSpanArr.push(0);
} else {
rowSpanArr.push(1);
position = index;
}
}
}
this.rowSpanArr = rowSpanArr;
},
// 合并行或列的计算方法
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// userName属性对应列表第0列
if (columnIndex === 0 ) {
if (this.rowSpanArr.length > rowIndex) {
const rowSpan = this.rowSpanArr[rowIndex];
return {
rowspan: rowSpan, //行
colspan: 1 //列
};
}
}
},