el-table 单元格合并

125 阅读1分钟

使用 span-method 方法,该方法接收4个参数: row, column, rowIndex, columnIndex, 返回单元格 一个对象{rowspan: 1,colspan: 1}

合并单元格 {rowspan: n,colspan: 1}, 被合并的单元格返回 {rowspan: 0,colspan: 0},默认不被合并的单元格 {rowspan: 1,colspan: 1}

let sortObj = {}
function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  if (['mtg_id','date'].includes(column.rawColumnKey)) { // 要合并的表格列(字段)
    let arr = []
    if (rowIndex === 0) { // 只有第一行去生成数据
      sortObj[column.rawColumnKey] = []
      arr = getSpanArr(cloneDeep(tableData.value), column.rawColumnKey) //生成对应列,每一行的单元格对象
      sortObj[column.rawColumnKey] = arr // 缓存一下
    } else {
      arr = sortObj[column.rawColumnKey] // 从缓存中获取对应的key 的单元格对象组成的数组
    }

    const row = arr[rowIndex].row
    const col = arr[rowIndex].col
    return {
      rowspan: row,
      colspan: col
    }
  } else {
    return {
      rowspan: 1,
      colspan: 1
    }
  }
}

生成对应列的单元格对象数组

function getSpanArr(data, key) {
  const newArr = []
  for (let j = 0; j < data.length; j++) {
    let item = data[j]
    if (key === 'date') {
      item.date = parseTime(item.date, 'YYYY-MM-DD')
    }
    if (j === 0) {
      newArr.push({
        row: 1,
        col: 1
      })
    } else {
      if (item[key] === data[j - 1][key]) {
        newArr.push({
          row: 0,
          col: 0
        })

        let index = j - 1
        while(newArr[index].row === 0) {
         if (index >0 ) {
          index--
         }
        }
        newArr[index].row++
      } else {
        newArr.push({
          row: 1,
          col: 1
        })
      }
    }
  }
  return newArr
}

合并后的效果

image.png