el-table动态表格的合并

我存粹记录，详细链接在 https://juejin.cn/post/6917460696414781454

通过遍历table数据比较前后两个元素是否相等 来构造一个 spanArr 数组存放rowspan，通过判断rowspan 来确定colspan的值

1.处理数据

//函数groupBy有两个形参，data 为 表格数据 ， params 为需要合并的字段
    groupBy (data, params) {
      const groups = {}
      data.forEach(v => {
      // 根据模拟数据 是通过a字段 来分组，获取data中的传入的params属性对应的属性值 ，放入数组中：["2222"]，再将属性值转换为json字符串：'["2222"]'
        const group = JSON.stringify(v[params])
      // 把group作为groups的key，初始化value，循环时找到相同的v[params]时不变
        groups[group] = groups[group] || []
      // 将对应找到的值作为value放入数组中
        groups[group].push(v)
      })
      // 返回处理好的二维数组 （如果想返回groupBy形式的数据只返回groups即可）
      return Object.values(groups)
    }

2.构造控制合并的数组spanArr

构造一个SpanArr数组赋予rowspan，即控制行合并
--接收重构数组 let arr = []

--设置索引 let pos = 0

--控制合并的数组 this.spanArr = []

3.reduce处理spanArr数组

再使用reduce方法比较redata前后两个元素是否相等，相等的话spanArr中对应索引的元素的值+1，并且在其后增加一个0占位，否则的话增加一个1占位，并记录当前索引，往复循环，构造一个给 rowspan 取值判断合并的数组。不太明白的话一会解释，先上代码:

redata.reduce((old, cur, i) => {
      // old 上一个元素  cur 当前元素  i 索引
        if (i === 0) {
        // 第一次判断先增加一个 1 占位 ，索引为0 
          this.spanArr.push(1)
          pos = 0
        } else {
          if (cur === old) {
            this.spanArr[pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            pos = i
          }
        }
        return cur
      }, {})

我们这一步的最终目的是构造spanArr，为了给rowspan判断合并。那么rowspan是怎么判断合并的呢？

结合我们第二步处理好的this.tableData数据可以明了的看到：数组中大于0的数字就是我们数据中要合并的这组数据数量同时也是这组数据需要合并的列数，而0就是代表这列不合并不合并，依次遍历，实现合并所选字段这一列的最终目的!如图理解 image.png

4.返回最终结果

最后一步啦，根据官方给的方法把我们处理好的spanArr传给rowspan即可！

    cellMerge ({ row, column, rowIndex, columnIndex }) {
    // 第一列合并
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }

5. 我的整体代码和实现效果

我实现的效果

image.png

// 数据
 tableList:[
        { name: '111', b: '1', c: '2'  ,spection:'特殊'},
        { name: '111', b: '2', c: '3'  ,spection:'特殊'},
        // { name: '111', b: '2', c: '3' ,spection:'特殊'},
        { name: '111', b: '2222', c: '3333' ,spection:'特殊' },
        // { name: '111', b: '2222', c: '3333'  ,spection:'特殊'},
        // { name: '111', b: '2', c: '3'  ,spection:'特殊'},
        { name: '2222', b: '1', c: '2'  ,spection:'特殊'},
        { name: '2222', b: '1', c: '2'  ,spection:'特殊'},
         { name: '2222', b: '1', c: '2' ,spection:'特殊' },
        { name: '333', b: '333', c: '333' ,spection:'特殊' },
        { name: '333', b: '123', c: '321'  ,spection:'特殊'},
        { name: '444', b: '123', c: '321'  ,spection:'特殊'},
      ],
// 相对应方法
// 合并单元格的规则
    arraySpanMethod({row,column,rowIndex,columnIndex}){
       if(columnIndex === 1 || columnIndex === 2 || columnIndex === 3 ||columnIndex === 4  
       || columnIndex === 5 || columnIndex === 6 ||columnIndex === 7 || columnIndex === 8 || columnIndex === 9 ||columnIndex === 10 ){
         const _row = this.spanArr[rowIndex]
         const _col = _row > 0 ? 1 : 0
         console.log(this.spanArr[rowIndex])
         console.log('----------')
         console.log(_col)
         return {
           rowspan: _row,
           colspan: _col
         }
       }
    },
    // 获取到数据后判断哪些数据行是需要合并的
    merageRows(){
     this.tableList.reduce((pre,cur,i) => {
        if(i === 0 ){
          this.spanArr.push(1),
          this.pos = 0
        }else{
          if( cur.name === pre.name ){
            this.spanArr[this.pos] +=1
            this.spanArr.push(0)
          }else{
            this.spanArr.push(1)
            this.pos = i
          }
        }
        return cur
      },{})
      console.log(this.spanArr)
    }