element ui 表格根据数据合并单元格rowspan

页面表格：

 <el-table 
      ref="tableData"
     :data="tableData"
     :span-method="objectSpanMethod"
      border
      v-loading="loading"
 >

方法：

  data() {
    return {
      loading: false,
      tableData: [],
      rowList: [],
      spanArr: [],
      position: 0,
    }
  },  
  methods: {  
    //合并单元格加载数据
    rowSpan() {
      this.rowList = [];
      this.spanArr = [];
      this.position = 0;
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          //需要根据比较的数据
          if (this.tableData[index].auditId === this.tableData[index - 1].auditId) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
            // console.log(this.spanArr, this.position);
          } else {
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //表格合并列数
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },

数据渲染时调用  rowSpan 方法：

  mounted() {
    this.search()
  },  
  methods: {
    search() {
      API.then(res=>{
        //表格合并
        this.rowSpan()
      })
    }
  },