我存粹記錄，詳細(xì)鏈接在 https://juejin.cn/post/6917460696414781454

通過(guò)遍歷table數(shù)據(jù)比較前后兩個(gè)元素是否相等 來(lái)構(gòu)造一個(gè) spanArr 數(shù)組存放rowspan，通過(guò)判斷rowspan 來(lái)確定colspan的值

1.處理數(shù)據(jù)

//函數(shù)groupBy有兩個(gè)形參，data 為 表格數(shù)據(jù) ， params 為需要合并的字段
    groupBy (data, params) {
      const groups = {}
      data.forEach(v => {
      // 根據(jù)模擬數(shù)據(jù) 是通過(guò)a字段 來(lái)分組，獲取data中的傳入的params屬性對(duì)應(yīng)的屬性值 ，放入數(shù)組中：["2222"]，再將屬性值轉(zhuǎn)換為json字符串：'["2222"]'
        const group = JSON.stringify(v[params])
      // 把group作為groups的key，初始化value，循環(huán)時(shí)找到相同的v[params]時(shí)不變
        groups[group] = groups[group] || []
      // 將對(duì)應(yīng)找到的值作為value放入數(shù)組中
        groups[group].push(v)
      })
      // 返回處理好的二維數(shù)組 （如果想返回groupBy形式的數(shù)據(jù)只返回groups即可）
      return Object.values(groups)
    }

2.構(gòu)造控制合并的數(shù)組spanArr

構(gòu)造一個(gè)SpanArr數(shù)組賦予rowspan，即控制行合并
--接收重構(gòu)數(shù)組 let arr = []

--設(shè)置索引 let pos = 0

--控制合并的數(shù)組 this.spanArr = []

3.reduce處理spanArr數(shù)組

再使用reduce方法比較redata前后兩個(gè)元素是否相等，相等的話spanArr中對(duì)應(yīng)索引的元素的值+1，并且在其后增加一個(gè)0占位，否則的話增加一個(gè)1占位，并記錄當(dāng)前索引，往復(fù)循環(huán)，構(gòu)造一個(gè)給 rowspan 取值判斷合并的數(shù)組。不太明白的話一會(huì)解釋，先上代碼:

redata.reduce((old, cur, i) => {
      // old 上一個(gè)元素  cur 當(dāng)前元素  i 索引
        if (i === 0) {
        // 第一次判斷先增加一個(gè) 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
      }, {})

我們這一步的最終目的是構(gòu)造spanArr，為了給rowspan判斷合并。那么rowspan是怎么判斷合并的呢？

image.png

4.返回最終結(jié)果

最后一步啦，根據(jù)官方給的方法把我們處理好的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. 我的整體代碼和實(shí)現(xiàn)效果

我實(shí)現(xiàn)的效果

image.png

// 數(shù)據(jù)
 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:'特殊'},
      ],
// 相對(duì)應(yīng)方法
// 合并單元格的規(guī)則
    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
         }
       }
    },
    // 獲取到數(shù)據(jù)后判斷哪些數(shù)據(jù)行是需要合并的
    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)
    }