基于element-ui的合并单元格(动态数据合并)

时间:2020-8-21 作者:admin

一、框架名称&版本号

框架: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(隐藏这些单元格)
以上,欢迎指正讨论~

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。