关于前端:基于elementui的合并单元格动态数据合并

一、框架名称 & 版本号

框架：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（暗藏这些单元格）
以上，欢送斧正探讨～