element-table合并相同行

效果

实现步骤

// 1.template标签
<template>
    <el-table id="tableVue" :data="dataSource" border stripe :span-method="objectSpanMethods" style="width:80%">
    <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label" :min-width="col.width">
    </el-table-column>
  </el-table>
</template> 

//2. data 数据
      spanObj: {
        firstCol: [],
        secondCol: [],
        thirdCol: [],
        fourCol: [],
        fiveCol: [],
      },
  dataSource: [
        {
          VehicleDriverData_Id: 57,
          Line_Id: 159,
          Line_Name: "103",
          Vehicle_Id: 475,
          Vehicle_Name: "66",
          Vehicle: 66,
          Emp_Id: 2,
          Emp_Code: "000003",
          Emp_Name: "张三",
          Pay_Month: "202109",
          Attendance_Numbers: 13,
          Operation_Numbers: 50,
          Stagnation_Numbers: 0,
          Overtime_Numbers: 0,
          Unilateral_Mileage: 5,
          Operating_Range: 120,
          GPS_Range: 0,
          Operating_Notes: "",
          Com_Range_Total: 700,
          Com_Range_Original: 400,
          Operation_Total: 140,
          Taxis: 0,
          Notes: null,
          CreateBy: 46,
          Create_Name: "admin",
          CreateOrg: null,
          CreateDate: "2021-09-29 16:54:31",
          ModifyBy: 46,
          Modify_Name: "",
          ModifyDate: "2021-09-29 16:54:54",
          ResourceId: null,
          Domain_Id: null,
          Flag: 0,
        }......],
        // 列标题
         columns: [
        {
          id: "Line_Name",
          label: "线路",
        },
       ...
        {
          id: "Operating_Notes",
          label: "备注",
        },
      ],
   // 3.排序代码
     mounted() {
    // 获取到要比较的具体数值，option为要进行比较的每项数据，propName为要比较的具体属性
    function getValue(option, propName) {
      if (!propName) {
        return option;
      }
      var data = option;
      propName.split(".").filter(function (item) {
        data = data[item];
      });
      return data + "";
    }
    // 将内容按某个字段排序（中文排序），此时先比较第一列，做合并之后再在当前的基础上依次比较剩余列，arr为要进行比较的数组，propArr为要比较的所有属性的集合
    function sortChinese(arr, propArr) {
      propArr.map((prop, index) => {
        if (index == 0) {
          arr.sort(function (item1, item2) {
            return getValue(item1, prop).localeCompare(
              getValue(item2, prop),
              "zh-CN"
            );
          });
        } else {
          arr.sort(function (item1, item2) {
            if (item1[propArr[index - 1]] == item2[propArr[index - 1]]) {
              return getValue(item1, prop).localeCompare(
                getValue(item2, prop),
                "zh-CN"
              );
            }
          });
        }
      });
    }
    // 合并表格相同的行，table为要进行比较的数组，columnCollections为要比较的所有属性的集合
    function mergeTheSameRow(table, columnCollections) {
      sortChinese(table, columnCollections);
      let firstColArr = [],
        secondColArr = [],
        thirdCloArr = [],
        fourCloArr = [],
        fiveCloArr = [];
      let firstPos = 0,
        secondPos = 0,
        thirdPos = 0,
        fourPos = 0,
        fivePos = 0;
      for (var i = 0; i < table.length; i++) {
        if (i === 0) {
          firstColArr.push(1);
          firstPos = 0;
          secondColArr.push(1);
          thirdCloArr.push(1);
          secondPos = 0;
          thirdPos = 0;
          fourCloArr.push(1);
          fiveCloArr.push(1);
          fourPos = 0;
          fivePos = 0;
        } else {
          if (
            table[i][columnCollections[0]] ===
            table[i - 1][columnCollections[0]]
          ) {
            firstColArr[firstPos] += 1;
            firstColArr.push(0);
          } else {
            firstColArr.push(1);
            firstPos = i;
          }
          if (
            table[i][columnCollections[1]] ===
            table[i - 1][columnCollections[1]]
          ) {
            secondColArr[secondPos] += 1;
            secondColArr.push(0);
            thirdCloArr[thirdPos] += 1;
            thirdCloArr.push(0);
            fourCloArr[fourPos] += 1;
            fourCloArr.push(0);
            fiveCloArr[fivePos] += 1;
            fiveCloArr.push(0);
          } else {
            secondColArr.push(1);
            secondPos = i;
            thirdCloArr.push(1);
            thirdPos = i;
            fourCloArr.push(1);
            fourPos = i;
            fiveCloArr.push(1);
            fivePos = i;
          }
        }
      }
      return [firstColArr, secondColArr, thirdCloArr, fourCloArr, fiveCloArr];
    }

    let returnTableResult = mergeTheSameRow(this.dataSource, [
      "Line_Name",
      "Vehicle_Name",
      "Vehicle",
      "Operation_Total",
      "Com_Range_Total",
    ]);
    this.spanObj.firstCol = returnTableResult[0];
    this.spanObj.secondCol = returnTableResult[1];
    this.spanObj.thirdCol = returnTableResult[2];
    this.spanObj.fourCol = returnTableResult[3];
    this.spanObj.fiveCol = returnTableResult[4];
  },
  }
  // 4.合并方法
    methods: {
           // 合并相邻两行同类型的数据（只对第一列、第二列生效）
    objectSpanMethods({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row1 = this.spanObj.firstCol[rowIndex];
        const _col1 = _row1 > 0 ? 1 : 0;
        return {
          rowspan: _row1,
          colspan: _col1,
        };
      }
      if (columnIndex === 1) {
        const _row2 = this.spanObj.secondCol[rowIndex];
        const _col2 = _row2 > 0 ? 1 : 0;
        return {
          rowspan: _row2,
          colspan: _col2,
        };
      }
      if (columnIndex === 2) {
        const _row3 = this.spanObj.thirdCol[rowIndex];
        const _col3 = _row3 > 0 ? 1 : 0;
        return {
          rowspan: _row3,
          colspan: _col3,
        };
      }
    },
      },