element-ui 表格相同数据合并列

<template>
  <div id="app">
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>
      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      spanArr: [], //一个空的数组，用于存放每一行记录的合并数
      pos: "", //pos是spanArr的索引,需要合并行下标
      spanArr2: [],
      pos2: "",

      tableData: [
        {
          id: "1",
          name: "王小虎1",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "1",
          name: "王小虎2",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "2",
          name: "王小虎2",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "3",
          name: "王小虎4",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "3",
          name: "王小虎5",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
      ],
    };
  },
  methods: {
    /*合并列  begin*/
    getSpanArr(data) {
      // data就是我们从后台拿到的数据
      for (let i = 0; i < data.length; i++) {
        //如果是第一条记录（索引为０），向数组中加入１，并设置索引位置
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0; //spanArr的索引

          this.spanArr2.push(1);
          this.pos2 = 0;
        } else {
          //如果不是第一条记录，则判断它与前一条记录是否相等
          //根据相同 扣分类别名称 进行合并,根据需要可进行修改
          if (data[i].id === data[i - 1].id) {
            //如果相等，则向spanArr中添入元素0，并将前一位元素＋１，表示合并行数＋１
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }

          if (data[i].name === data[i - 1].name) {
            //如果相等，则向spanArr中添入元素0，并将前一位元素＋１，表示合并行数＋１
            this.spanArr2[this.pos2] += 1;
            this.spanArr2.push(0);
          } else {
            this.spanArr2.push(1);
            this.pos2 = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col,
        };
      } else if (columnIndex === 1) {
        const _row = this.spanArr2[rowIndex];
        const _col = _row > 0 ? 2 : 0;
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },
  mounted() {
    this.getSpanArr(this.tableData);
  },
};
</script>