最近要写一个如下图的项目,需要合并单元格
<el-table :data="list" border style="width: 1000px;" :span-method="objectSpanMethod">
<el-table-column align="center" prop="frist_name" :label="list[0].specName" ></el-table-column>
<el-table-column align="center" prop="second_name" :label="list[0].specName1"></el-table-column>
<el-table-column align="center" prop="price" label="价格"></el-table-column>
</el-table>
其中 objectSpanMethod方法是合并单元格的关键,以下代码需要赋值
mergeObj:{},
mergeCol:['frist_name'],
getSpanArr(list){
this.mergeCol.forEach(key=>{
let count=0//记了了起始位置
this.mergeObj[key]=[];//记录每-列的合并信息
list.forEach((item,index)=>{// index == 0表示数据为第一行,直接 push 一个 1
if(index === 0){
this.mergeObj[key].push(1)
} else {
// 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1
if(item[key]=== list[index-1][key]){
this.mergeObj[key][count] += 1;
this.mergeObj[key].push(0);
} else {
// 如果当前行和上一行其值不相等
count = index;//记录当前位置
this.mergeObj[key].push(1);//重新push一个1
}
}
})
})
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if(this.specsList.length!=1){
if(this.mergeCol.indexOf(column.property)!==-1){
// 判断其值是否为0
if(this.mergeObj[column.property][rowIndex]){
return[this.mergeObj[column.property][rowIndex],1]
}else{
return[0,0]
}
}
}
},