el-table动态合并单元格

前置需求：暂不明确返回数据中哪一些单元格需要合并，需后端传参告诉需合并的目标数据

let spanArr = [
        {
          rowIndex: 0,// 行下标
          columnIndex: 0,// 列下标
          rowspan: 3,// 行占据单元格总数量
          colspan: 1// 列占据单元格总数量
        },
        {
          rowIndex: 0,
          columnIndex: 1,
          rowspan: 1,
          colspan: 2
        }
      ]

el-table的合并单元格配置在此忽略，不做赘述。

下面为el-table合并单元格的配置方法核心代码

tableSpanMethod({ row, column, rowIndex, columnIndex }) {
      let spanArr = [
        {
          rowIndex: 0,
          columnIndex: 0,
          rowspan: 3,
          colspan: 1
        },
        {
          rowIndex: 0,
          columnIndex: 1,
          rowspan: 1,
          colspan: 2
        }
      ]
      for (let i = 0; i < spanArr.length; i++) {
        //划分出需合并的每一个区域（spanArr[i]）
        if (
          columnIndex >= spanArr[i].columnIndex &&
          columnIndex <= spanArr[i].columnIndex + spanArr[i].colspan - 1 &&
          rowIndex >= spanArr[i].rowIndex &&
          rowIndex <= spanArr[i].rowIndex + spanArr[i].rowspan - 1
        ) {
          // 保留展示的单元格，合并单元格都为向右与向下延伸
          if (columnIndex === spanArr[i].columnIndex && rowIndex === spanArr[i].rowIndex) {
            return {
              rowspan: spanArr[i].rowspan,
              colspan: spanArr[i].colspan
            }
          } else {
            //删除冗余单元格
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
    },

效果展示