<el-table v-loading="loading" :data="projectList" @selection-change="handleSelectionChange" :span-method="objectSpanMethod">
// 合并table单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex ===0 || columnIndex ===1 || columnIndex ===2 || columnIndex ===3 || columnIndex ===4) {//定位到维度列
// 获取当前单元格的值
const currentValue = row[column.property];
// 获取上一行相同列的值
const preRow =this.projectList[rowIndex -1];
const preValue = preRow ? preRow[column.property] :null;
// 如果当前值和上一行的值相同，则将当前单元格隐藏
if (currentValue === preValue) {
return {rowspan:0, colspan:0 };
}else {
// 否则计算当前单元格应该跨越多少行
let rowspan =1;
for (let i = rowIndex +1; i
const nextRow =this.projectList[i];
const nextValue = nextRow[column.property];
if (nextValue === currentValue) {
rowspan++;
}else {
break;
}
}
return { rowspan, colspan:1 };
}
}
}
=============
<el-table
:data="tableData"
size="mini"
class="table-class"
border
style="width:100%"
max-height="760"
:span-method="objectSpanMethod"
>
// 合并table单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 1) { //定位到维度列
// 获取当前单元格的值
const currentValue = row[column.property];
// 获取上一行相同列的值
const preRow = this.tableData[rowIndex - 1];
const preValue = preRow ? preRow[column.property] : null;
// 如果当前值和上一行的值相同，则将当前单元格隐藏
if (currentValue === preValue) {
return { rowspan: 0, colspan: 0 };
} else {
// 否则计算当前单元格应该跨越多少行
let rowspan = 1;
for (let i = rowIndex + 1; i < this.tableData.length; i++) {
const nextRow = this.tableData[i];
const nextValue = nextRow[column.property];
if (nextValue === currentValue) {
rowspan++;
} else {
break;
}
}
return { rowspan, colspan: 1 };
}
}
},
https://blog.csdn.net/qq_44754635/article/details/132422181
