Element 合并列

:span-method="objectSpanMethod"

<el-table :data="data" :span-method="objectSpanMethod" border :height="tableHeight">
      <el-table-column prop="accountTypeDesc" width="100" :label="$t('report.GuestBill.lang_10')"></el-table-column>
</el-table>

定义变量

private spanArr: any[] = []; //用于存放每一行记录的合并数
private pos: number = 0;

方法

created() {
   this.getSpanArr();
}

getSpanArr() {
this.spanArr = []
    // this.data就是我们从后台拿到的数据
    for (var i = 0; i < this.data.length; i++) {
      console.log(this.data[i])
      if (i === 0) {
        this.spanArr.push(1);
        this.pos = 0;
      } else {
        // 判断当前元素与上一个元素是否相同 ,accountType是我后台返回的标识符
        if (this.data[i].accountType === this.data[i - 1].accountType) {
          this.spanArr[this.pos] += 1;
          this.spanArr.push(0);
        } else {
          this.spanArr.push(1);
          this.pos = i;
        }
      }
      console.log(this.spanArr);
    }
  }

  objectSpanMethod({ row, column, rowIndex, columnIndex }: any) {
    if (columnIndex === 0 ) {
      const _row = this.spanArr[rowIndex];
      const _col = 1;  //由于是合并第一列，col设置为1
      console.log(`rowspan:${_row} colspan:${_col}`);
      return {
        // [0,0] 表示这一行不显示， [2,1]表示行的合并数
        rowspan: _row,
        colspan: _col,
      };
    }
  }