element-ui 合并单元格 行处理方法

在平时开发过程中经常涉及到行、列单元格的合并，本文记录LZ使用方式，只涉及到行的合并（场景较多），列也可同理而得

1、获取合并规则

 /**
   * 合并单元格
   * @param tableData  table数据 []
   * @param spans      待合并 property  
   * eg:[{key:'country'},{key:'year',rely:'country'}], rely表依赖，是否依赖前置列
   * @returns {{}}
   */
  getMergeSpan(tableData,spans){
    let rowMerge = {},obj = {}
    for(let i = 0;i<spans.length;i++){
      let property = spans[i].key
      let rely = spans[i].rely
      let total = 1 , start = 0
      tableData.forEach((item,index)=>{
        let nextRow = tableData[index+1] || {}
        let isComRely =  rely ? item[rely] === nextRow[rely] : true
        if(item[property] === nextRow[property] && isComRely){
          total ++
        }else{
          obj[start] = total
          start = index + 1
          total = 1
        }
      })
      rowMerge[property] = obj
      obj = {}
    }
    return rowMerge
  },

2、elemen-ui  span-method 合并方式

   /**
   * element-ui 合并方法
   * @param row 行 数据
   * @param column 列信息
   * @param rowIndex 行号
   * @param columnIndex 列号
   * @returns {(*|number)[]|number[]}
   */
  tableMergeMethod({ row, column, rowIndex, columnIndex }) {
    if(columnIndex === 0){  //tip: 列位置 须根据el-table-column获取
      let total = this.tableMerge['country'][rowIndex]
      if(total){
        return [total,1]
      }else {
        return [0,0]
      }
    }
    if(columnIndex === 1){
      let total = this.tableMerge['year'][rowIndex] // tableMerge：通过getMergeSpan获取的规则
      if(total){
        return [total,1]
      }else {
        return [0,0]
      }
    }
  },

eg: this.tableMerge = getMergeSpan(this.tableData,[{key:'country'},{key:'year',rely:'country'}])

3、合并效果