vue使用el-table動態(tài)合并列及行

更新時間：2021年09月29日 16:33:14 作者：星雨我心愿

這篇文章主要為大家詳細介紹了vue使用el-table動態(tài)合并列及行，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue使用el-table動態(tài)合并列及行的具體代碼，供大家參考，具體內容如下

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

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

如下代碼：

getListDataForRowAndColumn(data){
            let self = this;
            self.rowAndColumn = [];
            self.rowRoomColumn = [];
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    // 如果是第一條記錄（即索引是0的時候），向數(shù)組中加入１
                    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
                    }
                }
            }
        },

以上代碼就是來整理你的數(shù)據(jù)，注釋寫的很清楚了，相信大家都能看懂，真不行就打印出來看看。

處理完數(shù)據(jù)后就用到上面提到的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開始的，可根據(jù)你的實際情況來。把從接口獲取到的數(shù)據(jù)放到getListDataForRowAndColumn這方法里即可，記得定義rowAndColumn,rowRoomColumn。

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

您可能感興趣的文章: