Element中table表格合並橫向單元格

element 的官方說明

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

 

 

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

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

那么,我么可以通過數組記錄每一行的合並狀態

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判斷是否合並,下標0則是第一列,需要合並多個列可以寫多個條件
        if(columnIndex === 0) {
            // this.id_array[rowIndex] 取出當前存放行的合並狀態
            const _row = this.id_array[rowIndex] 
            // 判斷當前的 列是否需要顯示
            const _col = _row > 0 ? 1 : 0
            return {
                rowspan: _row,
                colspan: _col
            }
        }
    }
}

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

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 用來重置當前項的位置