el-table表格多行合并

工作有个需求，将eltable中的第一二列数据相同的合并成一行，相应的数据序号也要调整

参考：https://www.cnblogs.com/sinceForever/p/14543349.html

HTML部分就跟平常的eltable一样，遍历生成或写死数据。

// 表格相同项合并
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        // 第一列的合并方法...;
        const row1 = this.tableArr[rowIndex];
        const col1 = row1 > 0 ? 1 : 0; // 如果被合并了_row=0则它这个列需要取消
        return {
          rowspan: row1,
          colspan: col1
        };
      }
    },
/**
 * 对表格数据进行处理，标记需要合并行的位置，并设置表格序号
 */
setData() {
  // 把需要合并行的归类, this.tableData是表格数据
  this.tableArr = []; // 用于记录每行的合并状态
  this.tablePos = 0; // 表格位置指针
  for (let i = 0; i < this.tableData.length; i++) {
    if (i === 0) {
      // 第一行必须存在
      this.tableArr.push(1); // 第一行不需要合并，标记为1
      this.tablePos = 0; // 更新表格位置指针
    } else {
        // 根据条件对相应数据进行合并
      if (this.tableData[i].outpatientNumber === this.tableData[i - 1].outpatientNumber) {
        this.tableArr[this.tablePos] += 1; // 需要合并的行，增加计数
        this.tableArr.push(0); // 标记下一行需要合并
      } else {
        this.tableArr.push(1); // 不需要合并的行，标记为1
        this.tablePos = i; // 更新表格位置指针
      }
    }
  }
  // 表格序号
  let Nosort = 0; // 表格序号初始化
  for (let n in this.tableArr) {
    if (this.tableArr[n] > 0) {
      Nosort += 1; // 如果行不需要合并，则增加表格序号
      this.$set(this.tableData[n], 'Nosort', Nosort); // 设置表格序号
    }
  }
}

最后，我这里是一个封装的表格组件，所以在watch监测传过来的表格数据，在数据变化的时候调用setData()方法，但会出现一个问题，就是表格数据显示会有问题，最后再mounted的时候再调一次setData()方法解决。