data(){
return{
mergeObj:{},
mergeArr:['name'],
}
}
// 合并列的方法
// 默认接收四个值{当前行的值,当前列的值,行的下标,列的下标}
objectSpanMethod({ row, column, rowIndex, columnIndex }){
// 判断列的属性
if(this.mergeArr.includes(column.property)){
// 判断对应的值是不是0
if(this.mergeObj[column.property][rowIndex]){
return [this.mergeObj[column.property][rowIndex],1]
}else{
return [0,0]
}
}
},
// 合并列的算法
getSpanArr(){
this.mergeArr.forEach((key,index1)=>{
let count=0;//记录合并行的起始位置
this.mergeObj[key]=[];//记录每一列的合并信息
this.tableData.forEach((item,index)=>{
if(index===0){//index==0表示是第一行,直接push一个1
this.mergeObj[key].push(1)
}else{
//判断当前行和上一行的内容是否一样,如果一样修改mergeObj中count下标的值+1,并且push一个0
if(item[key]===this.tableData[index-1][key]){
this.mergeObj[key][count]+=1;
this.mergeObj[key].push(0);
}else{//如果当前行和上一行的内容不一样
// 记录当前的位置并重新push一个1
count=index;
this.mergeObj[key].push(1);
}
}
})
})// console.log('查看最终效果',this.mergeObj);
},
<el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod" :row-class-name="tableRowClassName" v-loading="loading">
<el-table-column prop="name" label="对象" width="150"></el-table-column>
<el-table-column prop="code" label="参数"></el-table-column>
<el-table-column :label="label[0]">
<el-table-column prop="onePresetValue" label="方案值"></el-table-column>
<el-table-column prop="oneActualValue" label="实际值"></el-table-column>
<el-table-column prop="oneDifference" label="差值"></el-table-column>
</el-table-column>
<el-table-column :label="label[1]">
<el-table-column prop="twoPresetValue" label="方案值"></el-table-column>
<el-table-column prop="twoActualValue" label="实际值"></el-table-column>
<el-table-column prop="twoDifference" label="差值"></el-table-column>
</el-table-column>
<el-table-column :label="label[2]">
<el-table-column prop="threePresetValue" label="方案值"></el-table-column>
<el-table-column prop="threeActualValue" label="实际值"></el-table-column>
<el-table-column prop="threeDifference" label="差值"></el-table-column>
</el-table-column>
</el-table>