The table component specifies the concatenation parallel method

majority table Component only provides an abstract method to merge rows or columns , for example element ui Components ,

The parameter interpretation and usage of this method are as follows ,

I can see you ,rowspan Represents the number of rows actually occupied by each row of data ,colspan Represents the number of columns actually occupied by each row of data , We can encapsulate the following methods based on raw data ,

export const getSpanMethodData = (data = [], columns = [ ]) => {
    
  let mergeColumns = {
    } //  Used to remember the index of data and the number of repetitions when merging columns 
  let pos = {
    } //  It is used to record every repetition of the columns that need to be merged , Number of repetitions 
  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
}

When executed span-method Method time , You can write like this ,

 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,
        }
      }
    },