el-table根据某一字段值是否相等 动态合并行

引用el-table组件,传入span-method方法可以实现合并行或列,此处命名为objectSpanMethod:

<el-table ref="checkTable" border :data="tableData" :span-method="objectSpanMethod">        
    <el-table-column label="工作内容" prop="content"></el-table-column>
    <el-table-column label="分值" prop="score"></el-table-column>
    <el-table-column label="序号" prop="index"></el-table-column>
    <el-table-column label="工作计划" prop="workPlan"></el-table-column>
    <el-table-column label="年中工作进展" prop="workProgress"></el-table-column>
    <el-table-column label="年度总结" prop="annualSummary"></el-table-column>
    <el-table-column label="自评" prop="selfScore"></el-table-column>
    <el-table-column label="公司评分" prop="partyScore"></el-table-column>
</el-table>

接口返回值checkTableData为初始数据:

data(){
  return{
    checkTableData: [
      {"uid":"820523baeaceee4b53ea230e13d58432","content":"内容111","score":"60","index":1,"workPlan":"计划111","workProgress":"年中进展111","annualSummary":"年度总结111","selfScore":"56","partyScore":"52.3"},
      {"uid":"4ca687c6bfc08b4bb4b835abf425be10","content":"内容111","score":"60","index":2,"workPlan":"计划444","workProgress":"年中进展444","annualSummary":"年度总结444"},
      {"uid":"924fc807136d4142c719b911aa85c5d4","content":"内容111","score":"60","index":3,"workPlan":"计划555","workProgress":"年中进展555","annualSummary":"年度总结555"},
      {"uid":"30fd3f7eb335ab4b8fbb294b76c4e6af","content":"内容222","score":"30","index":1,"workPlan":"计划222","workProgress":"年中进展222","annualSummary":"年度总结222","selfScore":"24","partyScore":"18.6"},
      {"uid":"2e366a60252db249e02b3db20468f47d","content":"内容222","score":"30","index":2,"workPlan":"计划666","workProgress":"年中进展666","annualSummary":"年度总结666"},
      {"uid":"7e97f873d1ed0d4081d98e3d332a9687","content":"内容333","score":"20","index":1,"workPlan":"计划333","workProgress":"年中进展333","annualSummary":"年度总结333","selfScore":"17","partyScore":"16.8"}
    ],
    mergeObj: {}, // 用来记录需要合并行的下标
  }
}

在computed中对原始数据checkTableData进行处理,为tableData赋值返回值:
定义一个 this.mergeObj.content = []; // 记录每一列的合并信息

computed: {
    tableData() {
      let list = [...this.checkTableData];
      let count = 0; // 用来记录需要合并行的起始位置
      this.mergeObj.content = []; // 记录每一列的合并信息
      list.forEach((item, index) => {
        // index == 0表示数据为第一行,直接 push 一个 1
        if (index === 0) {
          item.index = 1;
          this.mergeObj.content.push(1);
        } else {
          // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
          if (item.content === list[index - 1].content) {
            this.mergeObj.content[count] += 1;
            this.mergeObj.content.push(0);
            item.index = this.mergeObj.content[count];
          } else {
            // 如果当前行和上一行其值不相等
            count = index; // 记录当前位置
            item.index = 1;
            this.mergeObj.content.push(1); // 重新push 一个 1
          }
        }
      });
      return list;
    },
}

数据处理好之后调用objectSpanMethod方法,如下:
根据 this.mergeObj.content = []; // 实现合并行操作
column.property 是需要合并的单元格

methods: {
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    // 判断列的属性
    if (
      column.property == 'content' ||
      column.property == 'score' ||
      column.property == 'selfScore' ||
      column.property == 'partyScore'
    ) {
      // 判断其值是不是为0
      if (this.mergeObj.content[rowIndex]) {
        return [this.mergeObj.content[rowIndex], 1];
      } else {
        // 如果为0则为需要合并的行
        return [0, 0];
      }
    }
  },
}

合并后的效果如下:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值