element-ui table表格動(dòng)態(tài)列合并

isLishude 發(fā)布于2019-08-23 10:35 / 2379人閱讀

摘要：前言的時(shí)候沒有表格合并的方法，這當(dāng)時(shí)做表格合并的功能時(shí)候，非常頭疼。開始官方已經(jīng)支持表格合并的方法，那怎么做到表格動(dòng)態(tài)合并呢，還是直接看代碼吧。該函數(shù)可以返回一個(gè)包含兩個(gè)元素的數(shù)組，第一個(gè)元素代表，第二個(gè)元素代表。

前言

element-ui 1.0的時(shí)候沒有表格合并的方法，這當(dāng)時(shí)做表格合并的功能時(shí)候，非常頭疼。2.0開始官方已經(jīng)支持表格合并的方法，那怎么做到表格動(dòng)態(tài)合并呢，還是直接看代碼吧。

官方例子

通過給table傳入span-method方法可以實(shí)現(xiàn)合并行或列，方法的參數(shù)是一個(gè)對(duì)象，里面包含當(dāng)前行row、當(dāng)前列column、當(dāng)前行號(hào)rowIndex、當(dāng)前列號(hào)columnIndex四個(gè)屬性。該函數(shù)可以返回一個(gè)包含兩個(gè)元素的數(shù)組，第一個(gè)元素代表rowspan，第二個(gè)元素代表colspan。也可以返回一個(gè)鍵名為rowspan和colspan的對(duì)象。

https://jsfiddle.net/ve4sy51x/1/

合并方法

https://jsfiddle.net/ve4sy51x...
通過一層一層往下找，

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
         if(cacheData.length<=0){
           return false
         }
          let colNum = cacheData[rowIndex][columnIndex];
          if (colNum < 2) {
            return {
              rowspan: colNum,
              colspan: colNum
            }
          } else {
          return {
            rowspan: colNum,
            colspan: 1
          }
        }
      },
      combine(){
        this.tableData.forEach((res,i)=> {
          cacheData[i] = [];
          colData.forEach((item, j) => {
            if (i === 0) {
              cacheData[0][j] = 1;
              cache = JSON.parse(JSON.stringify(res));
              cacheIndex[j] = 0;
            } else {
              if(res[item.prop] === cache[item.prop] && item.prop !=="index"){
                cacheData[cacheIndex[j]][j]++;
                cacheData[i][j] = 0
              }else{
                cache[item.prop] = res[item.prop];
                cacheIndex[j] = i;
                cacheData[i][j] = 1;
              }
            }
          })
        })    
      }

預(yù)處理生成一個(gè)二維數(shù)組，然后在放在objectSpanMethod方法里面。