element 動態合併表格

前言

　　element 官方的例子太簡單了，不知足實際的需求

　　數據確定是動態的，合併的行數，列數都是動態的，該如何知道每一行的合併數呢

需求

　　動態合併表格，數據來源於數據庫

正文

　　一開始，個人數據源是單獨的數組，表格數據合併了幾個數據，

　　我根據各個數組的長度，來決定每一行的合併數

　　結果：有些數據是正常的，但有些又合併出錯了。計算的方式不對

　　

 

 　　

　　嘗試二 

　　

dataPretreatment() 用這個方法 計算出每一行的行數

dataPretreatment(){   //表格數據列合併預處理,生成一個與行數相同的數組記錄每一行設置的合併數
        // 若是是第一條記錄（索引爲0），向數組中加入1，並設置索引位置；
        // 若是不是第一條記錄，則判斷它與前一條記錄是否相等，若是相等，
        // 則向mergingRows中添入元素0，並將前一位元素+1，表示合併行數+1，
        // 以此往復，獲得全部行的合併數，0即表示該行不顯示。
          for(let i = 0; i < this.tableData.length; i ++){ // tabledata 表格數據源
              if(i === 0){
                  this.mergingRows.push(1)
                  this.mergingPos = 0
              }else {
                if(this.tableData[i].name === this.tableData[i - 1].name) { //哪些數據是要合併的 合併的條件是什麼
                  
                    this.mergingRows[this.mergingPos] +=1
                    this.mergingRows.push(0)
                }else {
                    this.mergingRows.push(1)
                    this.mergingPos = i
                }
              }
          }
      },

　

   用這個方法 mergeColumn（）綁定到官方提供的span-method 方法上面

mergeColumn({row, column, rowIndex, columnIndex}){
         if (columnIndex === 0) { //第一列
             const _row = this.mergingRows[rowIndex];
             const _col = _row>0 ? 1 : 0;
             return {
                rowspan: _row,
                colspan: _col
             }
         }
        // if(columnIndex === 1){  //第二列 每一行的條件能夠不同 這樣就是動態多樣合併表格啦
        //     const _row = this.mergingRows[rowIndex];
        //     const _col = _row>0 ? 1 : 0;
        //      return {
        //          rowspan: _row,
        //          colspan: _col
        //      }
        //  }     
     },

　　展現結果

　　

 

注意注意

      1. 第一列 計算出要合併的行數

　　

 

　　2.發現鼠標在表格移動  mergeColumn（）這個方法一直在調用

Fannie式總結

　　必定要高清每一行的合併行數，按列來區分的

　　切記切記哦！否則表格合併出來的 跟你想象的不同