动态合并行和列(element-ui)

动态合并行和列

根据key值是否相同来合并 列或行。

效果图：

核心思想是构造存放rowspan，colspan 对应关系的数组。

element-ui 提供span-method 的方法。 具体查看文档。

<el-table :data="listData" border :span-method="arraySpanMethod">

 // 构造  this.rowspanMapArr  如下图所示
 // 构造  this.colspanMapArr  如下图所示
 
 arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        return {
          rowspan: this.rowspanMapArr[columnIndex][rowIndex],
          colspan: this.colspanMapArr[rowIndex][columnIndex],
        };
    },

对应的key 数组。

   const keyMap = [
          'key1',
          'key2',
          'key3',
          'key4',
      ]

// arraySpanMethod 里面用了下标，所以不在keyMap 除去不合并的 key

const norMergeKeyArr = [
    'key4',
]   

 data(){
    return {
       listData: [
              {
                 key1:'上下行合并',
                 key2:'1111'
                 key3:''
              },
                {
                 key1:'上下行合并',
                 key2:'1111'
                 key3:''
              },
                {
                 key1:'左右列合并', 
                 key2: null
                 key3: null
              },
       ]
    } 
 },
 created(){
     console.log('listData.length-->', this.listData.length)
     keyMap.forEach((keyName, innerIndex) => {
        this.rowspanMapArr.push(this.rowspan( [], 0, keyName) ) 
     })
     console.log('rowspanMapArr---> ',this.rowspanMapArr)
     this.genrateColspanArr();
 },
 methods: {
   rowspan(spanArr, position, spanName) {
     this.listData.forEach((item, index) => {
         if( norMergeKeyArr.includes(spanName)){
              spanArr.push(1);
         }else{
             if (index === 0) {
               spanArr.push(1);
               position = 0;
               } else {
                   if (
                       this.listData[index][spanName] ===
                       this.listData[index - 1][spanName]
                   ) {
                       spanArr[position] += 1;
                       spanArr.push(0);
                   } else {
                       spanArr.push(1);
                       position = index;
                   }
               }
         }
     });
     return spanArr
   },
   genrateColspanArr() {
     this.listData.forEach((item, outIndex) => {
         let curPos ;
         let colMapArr = []
         keyMap.forEach((keyName, innerIndex) => {
            if ( innerIndex === 0 && item[keyName] ) {
                       colMapArr.push(1);
                       curPos = 0;
                   } else {
                   //。左右列合并 通过判断 key 是否为 null 之类的，具体情况具体分析。
                   // 最好用lodash 之类工具判断  
                       if ( !item[keyName] && item[keyName] != 0 ) {
                           colMapArr[curPos] += 1;
                           colMapArr.push(0);
                       } else {
                           curPos = innerIndex
                           colMapArr.push(1);
                       }
               }
        })
        this.colspanMapArr.push(colMapArr)
     });
     console.log('colspanMapArr--',this.colspanMapArr)
   },
   arraySpanMethod({ row, column, rowIndex, columnIndex }) {
       return {
         rowspan: this.rowspanMapArr[columnIndex][rowIndex],
         colspan: this.colspanMapArr[rowIndex][columnIndex],
       };
   },
 },

总结：

这里分rowspan 和 colsan 情况。

1. 根据数据源的同个key 的value值是否一致，来判断是否上下行合并。 计算出各个rowspan的值。
2. 根据单条数据源内的key对应的value值，要保证一定的顺序。也就是说，下一个key的value值为null，上一个key的value值不为null 而合并，计算出各个 colspan 值。