vue el-table合并单元格

<template>
  <div class="countRight exporterPS_weiPS">
    <div class="rigMid">
      <el-table
        :data="listData"
        :span-method="objectSpanMethod"
        border
        style="width: 400px"
      >
        <el-table-column prop="type" label="序号" align="center"/>
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="sheetType" label="消息" />
        <el-table-column prop="id" label="id" />
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      spanArr: [], //合并用到的标识位数组
      listData: [
        {id: '1001',type: 1,name: "小李",sheetType: "调休单"},
        {id: '1002',type: 1,name: "小李",sheetType: "病假单"},
        {id: '1003',type: 1,name: "小李",sheetType: "事假单"},
        {id: '1004',type: 2,name: "小朱",sheetType: "病假单"},
        {id: '1005',type: 2,name: "小朱",sheetType: "问题单"},
        {id: '1006',type: 3,name: "小白",sheetType: "调休单"},
      ],
    };
  },

  methods: {
    /*
    * 处理数据
    *     原数据 A B C C A A  => 合并后 A B C
    * 标识位数组 [3 1 2 0 0 0]
    * 标识位数组(每个元素表示对应数据跨几行)
    */
    rowspan() {
      let position = 0;
      this.listData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          position = 0;
        } else {
          if (item.type === this.listData[index - 1].type) {
            this.spanArr[position] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            position = index;
          }
        }
      });
    },
    //表格合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) { 
      //参数是一个对象包含：当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
      //方法返回一个数组或对象[跨行，跨列] {rowspan: 跨行,colspan: 跨列}
      
      if (columnIndex === 0 || columnIndex === 1) { //操作第一列 第二列的数据
        if (this.spanArr[rowIndex]) { //合并几行
          return { 
            rowspan: this.spanArr[rowIndex],
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
  mounted() {
    this.rowspan();
  },
};
</script>