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

实现的需求如下：根据每行数据中“工作内容”字段是否相同，对“工作内容、分值、自评和公司评分”等字段进行合并（本篇代码忽略表格中的输入框）

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

接口返回值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赋值返回值：

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方法，如下：

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];
      }
    }
  },
}

合并后的效果如下：

合并行完整的代码如下：

参考链接：el-table表格动态合并行及合并行列实例详解_vue.js_脚本之家