vue使用el-table動態合並列及行

Posted on by

本文實例為大傢分享瞭vue使用el-table動態合並列及行的具體代碼，供大傢參考，具體內容如下

前兩天項目中需要用到表單合並，特此記錄，放便以後使用。

首先我使用的element-ui中的el-table，文檔中提供span-method方法可以實現合並行或列，大傢不熟悉的可以去看看element文檔地址，但是文檔提供的例子很簡單，不能滿足復雜的頁面，所以需要處理一下數據。

如下代碼：

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) {
                        // 如果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
                }  
            }
        },

搞定，來看看看效果圖吧

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

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：