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

波奇酱_超社恐

已于 2024-03-05 16:25:25 修改

阅读量1k

点赞数 11

文章标签： vue.js javascript 前端 elementui

于 2024-03-05 11:13:18 首次发布

本文链接：https://blog.csdn.net/m0_58827044/article/details/136470536

版权

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

引用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赋值返回值：

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

合并后的效果如下：

合并行完整的代码如下：

<template>
  <div class="table">
    <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>
  </div>
</template>
 
<script>
export default {
  name: 'WorkCheckSubForm',
  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: {
    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;
    },
  }
  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];
        }
      }
    },
  }
};
</script>

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