Element-ui表格组件合并单元格方法

参数说明
spanArr: [], // 合并表格二维数组
rowCols: [‘day’], //需要合并的字段属性数组

• table表格通用合并方法

table 表格合并 通用方法
list table数据
arr 需要合并的数据列的 prop 数组

export function mergeTableRow(list, arr) {
  let pos = 0
  const len = []
  const spanArr = []
  arr.forEach((col, cIndex) => {
    // 列  第几需要合并的个元素
    const rows = []
    list.forEach((row, rIndex) => {
      // 多少行数据 最大可合并行数
      if (!cIndex) {
        len.push(1)
      }
      if (!rIndex) {
        rows.push(1)
        pos = rIndex
      } else {
        // 是否与上一行 元素值相同
        if (list[rIndex][col] === list[rIndex - 1][col]) {
          rows[pos] += 1
          rows.push(0)
          // 更新第一个元素相同值的个数
          if (!cIndex) {
            len[rIndex] = rows[pos]
          }
          // 超出最大个数 重新赋值
          if (rows[pos] > len[rIndex]) {
            rows[pos] -= 1
            pos = rIndex
            rows[pos] += 1
          }
        } else {
          rows.push(1)
          pos = rIndex
        }
      }
    })
    spanArr.push(rows)
  })
  return spanArr
}

• 调用合并通用方法

this.spanArr = mergeTableRow(this.tableData, this.rowCols)

    // 表格合并展示
    mergeRowSpan({ row, column, rowIndex, columnIndex }) {
      let index = this.rowCols.findIndex((v) => v === column.property)
      if (
        (index !== -1 && column.property === this.rowCols[index])
      ) {
        if (index === -1) {
          index = 0
        }
        // console.log(this.spanArr[index][rowIndex], '====================spanArr ', column.property)
        const _row = this.spanArr[index][rowIndex]
        const _col = _row ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },

• 表格使用合并方法

<el-table v-loading="loading"
              :span-method="mergeRowSpan"
              :data="tableData" border stripe
    >
    ...
    </el-table>