el-table表格合并方案

Knox、杨

已于 2024-01-25 10:22:05 修改

阅读量549

点赞数 6

文章标签： vue.js javascript 前端

于 2024-01-25 10:18:01 首次发布

本文链接：https://blog.csdn.net/weixin_48022521/article/details/135837529

版权

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>