表格行列合并需要用到 table的方法 span-method
根据数据来进行动态的行列合并,实例如下:
javascript
<el-table
:data="tableData"
:span-method="objectSpanMethod"
style="width: 100%">
<el-table-column
prop="key"
label="分类"
width="180">
</el-table-column>
<el-table-column
prop="id"
label="编号"
width="180">
</el-table-column>
<el-table-column
prop="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合并到一起
javascript
//先处理数据
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.length
if (columnIndex === 0) { //判断是否是第一列
if(key === 'test1'){ //判断合并项 R1 R2
if (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中