elementUI 合并单元格

实现的效果

image.png

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

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

 <el-table
      :data="tableData6"
      :span-method="arraySpanMethod"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        sortable
        label="数值 1">
      </el-table-column>
      <el-table-column
        prop="amount2"
        sortable
        label="数值 2">
      </el-table-column>
      <el-table-column
        prop="amount3"
        sortable
        label="数值 3">
      </el-table-column>
    </el-table>
//下面处理的方法
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<array.length;j++){ 
        arr.push(array[j])
      }
      console.log(self.rowAndColumn,"rowAndColumn")
      for(let i = 0;i<arr.length;i++){     
        if(self.rowAndColumn[arr[i].orders_id]){
          break;
        }   
        let length = 1;
        for(let k = 0;k<arr.length;k++){
          if(arr[k].orders_id == arr[i].orders_id && i!==k){
            length += 1
          }          
        }
        self.rowAndColumn[arr[i].orders_id] = length
      }            
      console.log(array,"rowAndColumn")
      return array
    }

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