基于element-ui的合并单元格（动态数据合并）

一、框架名称&版本号

框架：element-ui

版本号：2.3.9或更高

传送门：

elment-ui页签：https://element.faas.ele.me/#...
demo地址：https://github.com/haryzxw/zx...

二、功能描述

实现table的合并单元格功能，表格横纵向的合并

三、核心代码及注释

基础数据示例：

    spanArr:[  // 合并坐标，row为行索引、col为列索引、span为行、列的合并数量；后端返回，或前端生成也可
      {
        row: 1,
        col: 1,
        span: [6,1]
      },
      ...
      ,
    ],
    mergeData: [  // 合并涉及的单元格对象数组
      {
         row: 1,   // 合并涉及的单元格的行索引
         column: 2,  // 合并涉及的单元格的列索引
         rowspan: 1,  // 纵向合并的行数
         colspan: 2  // 横向合并的列数
        }
    ]}
    

核心代码块：

getSpanArr(arr){  // 获得合并单元格对象数组，arr为表格行数据
     arr.map((value, index) => {  // 遍历表格数据
       this.spanArr.map((item, index1) => {  // 遍历后台返回的合并坐标数组
         if(index + 1 == item.row){   // 判断当前行与坐标数组行匹配
           for(var i = 0; i < item.span[0]; i++){  // 遍历合并数量数组的行数
             for(var j = 0; j < item.span[1]; j++){  // 遍历合并数量数组的列数
               if(i == 0 && j == 0){  // 以当前单元格作为合并起点，横纵向延伸
                 this.mergeData.push(  // 将单元格合并对象加入队列
                   {
                     row: item.row,  // 合并的单元格起始坐标的行索引
                     column: item.column,  // 合并的单元格起始坐标的列索引
                     rowspan: item.span[0],  // 合并行数
                     colspan: item.span[1]  // 合并列数

                   }
                 )
               }
               else{
                 this.mergeData.push( // 将被合并的单元格的合并行列数置为0，表示不显示该单元格
                   {
                     row: item.row + i,  // 被合并单元格的行索引（除起始单元格）
                     column: item.column + j,  // 被合并单元格的列索引（除起始单元格）
                     rowspan: 0,   // 不显示该单元格
           colspan: 0    // 不显示该单元格
                   }
                 )
               }
             }
           } 
         }
       })
     })
   },
   objectSpanMethod({ row, column, rowIndex, columnIndex }) {  // 合并方法
     for (let i = 0; i < this.mergeData.length; i++) {  // 遍历合并单元格的对象数组
       var value = this.mergeData[i]
       if(value.row == rowIndex + 1 && value.column == columnIndex){  // 找到需要设置rowspan、colspan的元素
         return {
           rowspan: value.rowspan,
           colspan: value.colspan
         }
       }
     }
   },

四、总结

注意被合并的单元格的起始单元格设置对应的行列合并即可，其他被合并的单元格应该将行列设置为0（隐藏这些单元格）
以上，欢迎指正讨论～