vue element表格合并

业务需求:

需要将el-table表格第一列相同的内容进行合并。

解决办法:

el-table中使用 :span-method="objectSpanMethod"方法

   objectSpanMethod({ row, column,rowIndex  }) {
      let fields = ["xxx", ]; // 合并的列 id
      let cellValue = row[column.property];

      if (cellValue && fields.includes(column.property)) {
        let prevRow = this.tableData[rowIndex - 1]; // 上一个
        let nextRow = this.tableData[rowIndex + 1]; // 下一个

        if (
          prevRow &&
          prevRow[column.property] === cellValue &&
          row.seq === prevRow.seq
        ) {
          return { rowspan: 0, colspan: 0 };

          /*  当上一个格子存在
              下一个格子存在  
              上一个的内容 等于 当前内容
              下一个的内容 等于 当前格子内容
          */
        } else if (
          prevRow &&
          nextRow &&
          prevRow[column.property] === cellValue &&
          nextRow[column.property] === cellValue
        ) {
          return { rowspan: 1, colspan: 1 };
        } else {
          let countRowspan = 1;
          while (
            nextRow &&
            nextRow[column.property] === cellValue &&
            row.seq === nextRow.seq
          ) {
            nextRow = this.tableData[++countRowspan + rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },