el-table 合并前四列：为什么第四列无法合并？

el-table合并部分成功部分不成功？

问题描述:

需要合并el-table中前4列的内容，但是第4列无法合并。

渲染代码:

解决方法:

玄鲸Timeline

一个AI驱动的历史时间线生成平台

下载

可以使用自定义的合并方法来实现特定列的合并。

// 合并方法
merge(tableData) {
  this.companyArr = [];
  this.companyPos = 0;
  this.simpleArr = [];
  this.simplePos = 0;
  this.symbolArr = [];
  this.symbolPos = 0;
  for (var i = 0; i < tableData.length; i++) {
    if (i === 0) {
      // 第一行必须存在
      this.companyArr.push(1);
      this.companyPos = 0;
      this.simpleArr.push(1);
      this.simplePos = 0;
      this.symbolArr.push(1);
      this.symbolPos = 0;
    } else {
      // 第一列
      if (tableData[i].name === tableData[i - 1].name) {
        this.companyArr[this.companyPos] += 1;
        this.companyArr.push(0);
      } else {
        this.companyArr.push(1);
        this.companyPos = i;
      }

      // 第二列
      if (
        tableData[i].name === tableData[i - 1].name &&
        tableData[i].factor === tableData[i - 1].factor
      ) {
        this.simpleArr[this.simplePos] += 1;
        this.simpleArr.push(0);
      } else {
        this.simpleArr.push(1);
        this.simplePos = i;
      }

      // 第四列
      if (
        tableData[i].name === tableData[i - 1].name &&
        tableData[i].factor === tableData[i - 1].factor &&
        tableData[i].symbol === tableData[i - 1].symbol
      ) {
        this.symbolArr[this.symbolPos] += 1;
        this.symbolArr.push(0);
      } else {
        this.symbolArr.push(1);
        this.symbolPos = i;
      }
    }
  }
},

//合并方法
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    // 合并第一列
    const _row_1 = this.companyArr[rowIndex];
    const _col_1 = _row_1 > 0 ? 1 : 0; // 如果被合并了_row=0则它这个列需要取消
    return {
      rowspan: _row_1,
      colspan: _col_1,
    };
  } else if (columnIndex === 1) {
    // 合并第二列
    const _row_2 = this.simpleArr[rowIndex];
    const _col_2 = _row_2 > 0 ? 1 : 0;
    return {
      rowspan: _row_2,
      colspan: _col_2,
    };
  } else if (columnIndex === 3) {
    // 合并第四列
    const _row_3 = this.symbolArr[rowIndex];
    const _col_3 = _row_3 > 0 ? 1 : 0;
    return {
      rowspan: _row_3,
      colspan: _col_3,
    };
  }
},

完整示例: