vue中el-table合并单元格
1.在el-table中添加 :span-method=“handdelSpanMethod”
2.handdelSpanMethod方法
//历史单特殊计量合并企业名称相同的第一列
handdelSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 2) { // 企业名称相同时,合并第一列
const prevRow = this.specilHislList[rowIndex - 1];
if (prevRow && row.userName === prevRow.userName) {
return {
rowspan: 0,
colspan: 1
};
} else {
let rowspan = 1;
for (let i = rowIndex + 1; i < this.specilHislList.length; i++) {
if (this.specilHislList[i].userName === row.userName) {
rowspan++;
} else {
break;
}
}
return {
rowspan,
colspan: 1
};
}
}
/*****当mergeId为空时不合并******/
if (columnIndex === 17) { // 合并第17列,即合计列
const mergeId = row.mergeId;
if (mergeId === null) {
// 如果 mergeId 为 null,返回 1,表示不合并
return [1, 1];
}
// 判断当前行和上一行的 mergeId 是否相同
const prevRow = this.specilTotallList[rowIndex - 1];
if (prevRow && prevRow.mergeId === mergeId) {
// 如果上一行 mergeId 与当前行相同,则合并单元格,返回 [0, 0] 表示合并
return [0, 0];
} else {
// 否则,不合并,返回 [1, 1] 表示当前单元格占用一行一列
let rowspan = 1;
// 向下查找连续相同 mergeId 的行数
for (let i = rowIndex + 1; i < this.specilTotallList.length; i++) {
if (this.specilTotallList[i].mergeId === mergeId) {
rowspan++;
} else {
break;
}
}
return [rowspan, 1]; // 设置 rowspan
}
}
// 其他列不做处理,返回默认值
return [1, 1];
},
},