el-table 实现自定义合并行

不多逼逼，上代码！

<template>
  <div class="app-container">
    <el-table :data="tableData" border :span-method="objectSpanMethod">
      <el-table-column prop="phone" align="center" label="号码"> </el-table-column>
      <el-table-column prop="reportName" align="center" label="报告名称"> </el-table-column>
      <el-table-column prop="reason" align="center" label="原因"> </el-table-column>
      <el-table-column prop="result" align="center" label="发送结果"> </el-table-column>
      <el-table-column prop="sendTime" align="center" label="发送时间"> </el-table-column>
      <el-table-column prop="returnTime" align="center" label="收到回执的时间"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [
        {
          phone: "12987122",
          reportName: "报告1",
          reason: "文件缺失",
          result: "发送成功",
          sendTime: "2022-9-16 10:36:55",
          returnTime: "2022-9-16 10:36:55",
        },
        {
          phone: "12987122",
          reportName: "报告2",
          reason: "文件缺失",
          result: "发送成功",
          sendTime: "2022-9-16 10:36:55",
          returnTime: "2022-9-16 10:36:55",
        },
        {
          phone: "",
          reportName: "报告3",
          reason: "号码缺失",
          result: "发送成功",
          sendTime: "2022-9-16 10:36:55",
          returnTime: "2022-9-16 10:36:55",
        },
        {
          phone: "",
          reportName: "报告4",
          reason: "号码缺失",
          result: "发送成功",
          sendTime: "2022-9-16 10:36:55",
          returnTime: "2022-9-16 10:36:55",
        },
        {
          phone: "12987126",
          reportName: "报告5",
          reason: "文件缺失",
          result: "发送成功",
          sendTime: "2022-9-16 10:36:55",
          returnTime: "2022-9-16 10:36:55",
        },
      ],
      // 合并源对象
      mergeObj: {},
      // 合并字段
      mergeArr:  ["phone", "reason", "result", "sendTime", "returnTime"],
    };
  },
  mounted() {
    this.rowspan();
  },
  methods: {
    rowspan() {
      for (let key of this.mergeArr) {
        let count = 0;
        this.mergeObj[key] = [];
        this.tableData.forEach((item, index) => {
          if (index === 0) {
            this.mergeObj[key].push(1);
          } else {
          	// 若想要根据某个字段划分界限，则在下方条件后加上条件即可，例如：”item[key] === this.tableData[index - 1][key] && item.phone === this.tableData[index - 1].phone“
            if (item[key] === this.tableData[index - 1][key]) {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
            } else {
              count = index;
              this.mergeObj[key].push(1);
            }
          }
        });
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.mergeArr.indexOf(column.property) !== -1) {
        if (this.mergeObj[column.property][rowIndex]) {
          return {
            rowspan: this.mergeObj[column.property][rowIndex],
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1,
        };
      }
    },
  },
};
</script>

复制运行即可查看demo，请根据自己的需求进行修改，授人以鱼不如授人以渔。