按类别从左到右合并element ui 表格单元

util.js

import { cloneDeep, defaultsDeep, set } from 'lodash'

function spanMethod(mergeList, data) {
  const alias = mergeList.reduce((dict, item) => {
    return {
      ...dict,
      [item.prop]: item.groupBy || item.prop,
    }
  }, {})

  const tree = data.reduce((treeObj, row, i) => {
    let newLine = false
    return Object.keys(row).reduce((o, k) => {
      const key = alias[k]
      if (!key) return o
      const obj = defaultsDeep(o, { [key]: { [row[key]]: [] } })

      if (i > 0 && data[i - 1][key] !== data[i][key]) {
        newLine = true
      }
      if (newLine) {
        set(obj[key], [row[key]], [...obj[key][row[key]], 1])
      } else {
        const lastItem = (obj[key][row[key]].pop() || 0) + 1
        set(obj[key], [row[key]], [...obj[key][row[key]], lastItem])
      }
      return obj
    }, treeObj)
  }, {})

  let cache = {}
  let mergeTree = {}
  return ({ row, column, rowIndex, columnIndex }) => {
    if (rowIndex === 0 && columnIndex === 0) {
      cache = {}
      mergeTree = cloneDeep(tree)
    }
    const property = alias[column.property]
    const value = row[property]
    if (cache?.[property] > 0) {
      cache[property] -= 1
      return [0, 0]
    }
    if (mergeTree[property]?.[value]?.length > 0) {
      const num = mergeTree[property][value].shift()
      cache[property] = num - 1
      return [num, 1]
    }
    return [1, 1]
  }
}