表格行列合并需要用到 table的方法 span-method

根據數據來進行動態的行列合并，實例如下：

 <el-table:data="tableData":span-method="objectSpanMethod" style="width: 100%"><el-table-columnprop="key"label="分類"width="180"></el-table-column><el-table-columnprop="id"label="編號"width="180"></el-table-column><el-table-columnprop="name"label="名稱"></el-table-column></el-table>
let data = [{ key:'test1', id:0, name:'xxx' },{ key:'test1', id:1, name:'xxx' },{ key:'test2', id:2, name:'xxx' },{ key:'test1', id:3, name:'xxx' },{ key:'test2', id:4, name:'xxx' },{ key:'test1', id:5, name:'xxx' },
]

我們要根據 key 進行列合并，將test1合并到一起，test2合并到一起

//先處理數據
let one = data.filter(item => item.key === 'test1')
let two= data.filter(item => item.key === 'test2')//保證test1 在一堆，test2在一堆
tableData = one.concat(two)//列合并方法
objectSpanMethod =({ row, column, rowIndex, columnIndex })=>{const { key } = row// test1 使用 rowIndex作為開始// test2 采用rowIndex - test1 長度開始let last = rowIndex - one.lengthif (columnIndex === 0) { //判斷是否是第一列if(key === 'test1'){ //判斷合并項 R1 R2if (rowIndex % one.length === 0) {return {rowspan: one.length, // 需要合并的行數colspan: 1}}else{ //不在范圍內 直接返回默認return {rowspan: 0,colspan: 0}}}else if(key === 'test2'){if(last % two.length === 0){return {rowspan: two.length, // 需要合并的行數colspan: 1}}else{return {rowspan: 0,colspan: 0}}}  }
}

我們根據 key 進行列合并，按照合并規則 id 為0 1 3 5的數據合并到 test1 中，id為2 4的數據合并到test2中