table 组件指定列合并行方法

大多数table组件只提供了一个合并行或者合并列的抽象方法，例如 element ui 组件，

该方法的参数解释及其用法如下，

看得出来，rowspan代表每一行数据实际占用的行数，colspan代表每一行数据实际占用的列数，我们可以基于原始数据封装如下方法，

export const getSpanMethodData = (data = [], columns = [ ]) => {
    
  let mergeColumns = {
    } // 用来记住合并列时数据的索引和重复的次数
  let pos = {
    } // 用来记录需要合并的列每次出现重复时，重复的次数
  columns.forEach(p => {
    
    mergeColumns[p] = []
    pos[p] = 0
  })
  for (let i = 0; i < data.length; i++) {
    
    if (i === 0) {
    
      columns.forEach(p => {
    
        mergeColumns[p].push(1)
        pos[p] = 0
      })
    } else {
    
      columns.forEach((p, index) => {
    
        let obj = {
    
          curr: '',
          prev: '',
        }
        for (let j = 0; j <= index; j++) {
    
          obj.curr += JSON.stringify(data[i][columns[j]])
          obj.prev += JSON.stringify(data[i - 1][columns[j]])
        }
        if (obj.curr === obj.prev) {
    
          mergeColumns[p][pos[p]] += 1
          mergeColumns[p].push(0)
        } else {
    
          mergeColumns[p].push(1)
          pos[p] = i
        }
      })
    }
  }
  return mergeColumns
}

当执行span-method方法的时候，就可以这样写，

 handleSpan ({
     row, column, rowIndex, columnIndex, }) {
    
      if (columnIndex === 0) {
    
        const _row = this.table.spanArr[column.key][rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
    
          rowspan: _row,
          colspan: _col,
        }
      }
    },