el-table使用这个方法合并单元格,:span-method=“hbcell”
<el-table size="small" :data="table.data" border
empty-text="暂无数据" :cell-style="cellStyle" :header-cell-style="tableHeaderColor"
:span-method="hbcell"
>
<el-table-column align="center" v-for="item in table.columns" :key="item.prop" :prop="item.prop"
:label="item.label">
</el-table-column>
</el-table>
//合并单元格
hbcell({row,column,rowIndex,columnIndex}){
if (columnIndex === 0) {//只需要合并第一列
return this.mergeCol(rowIndex,this.table.columns[columnIndex].prop)
}
}
//处理合并单元格
mergeCol(rowIndex,prop){
//获取当前单元格的值
let colVal = this.table.data[rowIndex][prop];
//循环每一列的数据
if(rowIndex>0){
if(this.table.data[rowIndex][prop]!=this.table.data[rowIndex-1][prop]){
let i=rowIndex;
let num=0;
while(i<this.table.data.length){
if(this.table.data[i][prop]===colVal){
//相等进行计数
i++;
num++;
}else{
//跳出循环
break;
}
}
return {
rowspan:num,
colspan:1
};
}else{
//相等则不显示
return {
rowspan: 0,
colspan: 0
};
}
}else{
//如果为第一行
let i=rowIndex;
let num=0;
while(i<this.table.data.length){
if(this.table.data[i][prop]===colVal){
//相等进行计数
i++;
num++;
}else{
//跳出循环
break;
}
}
return {
rowspan:num,
colspan:1
};
}
},