一、效果图
1、原图效果
![Element-UI的Table指定列相同数据进行合并_Elemen-UI](//dev-img.mos.moduyun.com/20231028/147db5d9-f1fa-4aa0-bc81-99caabe896ba.png)
2、目标效果
![Element-UI的Table指定列相同数据进行合并_Elemen-UI_02](//dev-img.mos.moduyun.com/20231028/349163da-9b54-4f8c-bb37-3598809e30fe.png)
二、实现代码
#使用提供的:span-method="handleSpanMethod"方法进行合并处理
handleSpanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex === 0) {
const _row = this.filterData(this.tableData, columnIndex).one[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row, //合并行数
colspan: _col, //合并列数
}
}
},
filterData(arr, colIndex) {
let spanOneArr = [];
let concatOne = 0;
arr.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1);
} else {
if (colIndex === 0) {
if (item.nodeParentName === arr[index - 1].nodeParentName) {
spanOneArr[concatOne] += 1;
spanOneArr.push(0);
} else {
spanOneArr.push(1);
concatOne = index;
}
}
}
});
return {
one: spanOneArr,
};
}