elementUI 合并单元格

实现的效果

image.png

思路
el-table 的有一个指令
span-method 在此属性上使用方法:span-method="objectSpanMethod"

image.png

官方文档是这样介绍的 row是行的数据 column是列数据 rowIndex 第几行 columnIndex 第几列
官方示例是这样的

 
      
      
      
      
      
      
      
      
      
      
    
//下面处理的方法
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

首先看看这个方法做的事
是把列号为0 行号取余为0的行合并
这里面合并的关键为

return {
              rowspan: 关键值,
              colspan: 1
            };

如果我们知道这个值那么问题也就解决了 也就是说我们要做的是根据我们后端返回的数据，知道两个条件
1、我们要根据什么条件合并行或者列
2、这个条件达成之后要要合并多少行
那么根据这两个我们可以先定一个条件对象 rowAndColumn = {}
假设根据相同ID号合并
然后在这个对象上处理需要的条件rowAndColumn[id] = ID出现的次数，那么上面的的方法可以改写为

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
       let self = this
       if (columnIndex === 0) {
         if (self.rowAndColumn[row.orders_id]) {
           let rowNum = self.rowAndColumn[row.orders_id]   
           return {
               rowspan: rowNum,
               colspan: 1
             }                                                   
         }
         return {
             rowspan: 1,
             colspan: 1
           }  
       }
     }

这样就能实现合并 但是这样有一个问题就是 假设id出现了两次 第一次我们希望合并但是第二次我们不希望合并 所以要做一个开关到达只合并第一个 后面相同id的则不合并第一列
则

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let self = this
        if (columnIndex === 0) {
          if (self.rowAndColumn[row.orders_id]) {
            let rowNum = self.rowAndColumn[row.orders_id]           
            if(self.rowAndColumn[row.orders_id] !== 'yet'){
              //若已执行了合并则设置标识标识以后出现的不再合并
              self.rowAndColumn[row.orders_id] = 'yet'
              return {
                rowspan: rowNum,
                colspan: 1
              } 
            }
            return {
              rowspan: 0,
              colspan: 0
            } 
                              
          }
          return {
              rowspan: 1,
              colspan: 1
            }  
        }
}

这样我们的合并基本解决 那么接下来就是怎么处理rowAndColumn这个对象了
首先我们要把后端给的数组排序 或者让后端排好序给我们
然后我们处理这个rowAndColumn对象，看代码(代码丑陋不要介意)

/**
     * 处理需要合并的数组
     *@param array  {Array} 需要合并的数组
    */
    getListDataForRowAndColumn(array){
      let self = this
      self.rowAndColumn = {}
      let arr = []
      for(let j= 0;j

这样就基本完成了首列根据id相同合并首行的方式，其他的行或者列也可以参考这个方式进行