本文例項為大家分享了使用el-table動態合併列及行的具體程式碼，供大家參考，具體內容如下

前兩天專案中需要用到表單合併，特此記錄，放便以後使用。

首先我使用的element-ui中的el-table，文件中提供span-method方法可以實現合併行或列，大家不熟悉的可以去看看element文件地址，但是文件提供的例子很簡單，不能滿足複雜的頁面，所以需要處理一下資料。http://www.cppcns.com

如下程式碼：

getListDataForRowAndColumn(data){
            let self = this;
            self.rowAndColumn = [];
            self.rowRoomColumn = [];
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    // 如果是第一條記錄（即索引是0的時候），向陣列中加入１
                    self.rowAndColumn.push(1);
                    self.pos = 0;
                    self.rowRoomColumn.push(1);
                    self.posT = 0;
                } else {
                    //data[i].typeDesc就是你從介面讀取的欄位資訊，下同
                    if (data[i].typeDesc === data[i - 1].typeDesc) {
          eaHukUQY
 
              // 如果typeDesc相等就累加，並且push 0
                        self.rowAndColumn[self.pos] += 1
                        self.rowAndColumn.push(0)
                        if (data[i].areaDesc === data[i - 1].areaDesc) {
                            // 如果areaDesc相等就累加，並且push 0
                            self.rowRoomColumn[self.posT] += 1
                            self.rowRoomColumn.push(0)
                        } else {
                            self.rowRoomColumn.push(1)
                            self.posT = i
                        }
                    } else {
                        // 不相等push 1
                        self.rowAndColumn.push(1)
                        self.pos = i;
                        self.rowRoomColumn.push(1)
                        self.posT = i
                    }
                }
            }
        },

以上程式碼就是來整理你的資料，註釋寫的很清楚了，相信大家都能看懂，真不行就打印出來看看。

處理完資料後就用到上面提到的span-method方法了。如圖：

objectSpanMethod方法如下：

objectSpanMethod({ row,column,rowIndex,columnIndex }) {
            let self = this
            if (columnIndex === 1) {
                if (self.rowAndColumn[rowIndex]) {
                let rowNum = self.rowAndColumn[rowIndex];
                return {
                    rowspan: rowNum,colspan: rowNum > 0 ? 1 : 0
                    }                                                   
                }
                return {
                    rowspan: 0,colspan: 0
                }  
            }
            if (columnIndex === 2) {
                if (self.rowRoomColumn[rowIndex]) {
                let roomNum = self.rowRoomColumn[rowIndex];
                return {
                    rowspan: roomNum,colspan: roomNum > 0 ? 1 : 0
                    }                                                 
 
  
                }
                return {
                    rowspan: 0,colspan: 0
                }  
            }
        },

搞定，來看看看效果圖吧

注意，使用這方法時一定要讓後端經過排序後再傳出來，否則頁面可能會達eaHukUQY不到你想要的效果。因為我是從第二列開始合併的，所以objectSpanMethod方法中的columnIndex從1開始的，可根據你的實際情況來。把從介面獲取到的資料放到getListDataForRowAndColumn這方法裡即可，記得定義rowAndColumn,rowRoomColumn。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。