element的官方說明

通過給table傳入span-method方法可以實現合并行或列，方法的參數是一個對象，里面包含當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。該函數可以返回一個包含兩個元素的數組，第一個元素代表rowspan，第二個元素代表colspan。 也可以返回一個鍵名為rowspan和colspan的對象。

官方代碼可以看出, 如果想要合并當前指定的單元格 需要指定合并的rowspan: 合并的行 colspan: 合并的列當直接設置為0的時候就不會顯示
因此當指定不同的rowspan 和 colspan的時候就可以設定滿足條件的合并單元格
而且 objectSpanMethod 方法是table在渲染每一行的時候就會觸發(fā)
因此可以通過一個數組記錄每行的合并狀態(tài)

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if(columnIndex === 0) {
        if( rowIndex % 2 === 0 ) {
            return {
                  rowspan: 2,
                  colspan: 1
            };
        }
        else {
            return {
              rowspan: 0,
              colspan: 0
            };
        }
    }
},

通過數組記錄每一行的合并狀態(tài)

data() {
    return {
        id_array: [],
        id_pos: 0,
        tableData: []
    }
},
mounted() {
    this.id_init()
},
methods: {
    id_init() {
        this.id_array = []
        this.id_pos = 0
        for(let i = 0 ; i < this.tableData.length; i++) {
            // 如果當 i == 0 說明數據是第一行, 需要重新賦值
            if(i == 0) {
                // this.id_array.push(1) 說明這一行數據被顯示出來
                this.id_array.push(1)
                // this.id_pos = 0 重置當前的計數器
                this.id_pos = 0
            }
            // 說明不是從第一行開始遍歷的
            else {
                // 判斷當前的指定數據是否和之前的指定數據值相同
                if(this.tableData[i].id == this.tableData[i-1].id) {
                    // 如果相同就需要將 this.id_array 的數據自加
                    this.id_array[this.id_pos] += 1
                    // 同時需要將 this.id_array push一個0 表示下一行不用顯示
                    this.id_array.push(0)
                }
                // 說明 當前的數據和上一行的指定數據不同
                else {
                    // this.id_array.push(1) 說明當前一行的數據需要顯示
                    this.id_array.push(1)
                    // 重新給計數器賦值
                    this.id_pos = i
                }
            }
        }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        // 用于給第一列的table判斷是否合并
        if(columnIndex === 0) {
            // this.id_array[rowIndex] 取出當前存放行的合并狀態(tài)
            const _row = this.id_array[rowIndex] 
            // 判斷當前的 列是否需要顯示
            const _col = _row > 0 ? 1 : 0
            return {
                rowspan: _row,
                colspan: _col
            }
        }
    }
}

代碼分析
首先 id_init 方法用于獲取當前傳遞的數據中 有哪些是需要合并的數據
this.id_array = [] 用來存放需要合并的單元格的數據
打印結果 [2, 0, 8, 0, 0, 0, 0, 0, 0, 0]
數組中的0 代表當前單元格是不需要顯示, 已經被合并的單元格
數組中的數字代表當前的數據需要合并幾個單元格
this.id_pos = 0 用來存放當前需要合并單元格的索引
當數據需要合并單元格的時候, 保存當前數據的索引, 一直到不滿足合并單元格時的條件, 之后再記錄新的數據的索引

　　

if(i == 0) {
    // this.id_array.push(1) 說明這一行數據被顯示出來
    this.id_array.push(1)
    // this.id_pos = 0 重置當前的計數器
    this.id_pos = 0
}

當i == 0說明當前的索引為0需要設置默認的顯示數據
this.id_array.push(1)就是用于設置默認第一行的顯示
this.id_pos = 0用來重置當前項的位置

轉：https://blog.csdn.net/weixin_43972992/article/details/103474135

總結

以上是生活随笔為你收集整理的Element中table表格合并单元格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。