Element table 组件合并行

Element table 组件合并行

1
2
3
4
5
6
7
8
9
<template>
<el-container style="width: 500px; padding: 20px;">
<el-table :data="tableData" :span-method="handleSpanMethod" border>
<el-table-column prop="code" label="城市代码" width="100" align="center"></el-table-column>
<el-table-column prop="name" label="城市名称" width="auto" align="center"></el-table-column>
<el-table-column prop="parent.name" label="上级名称" width="100" align="center"></el-table-column>
</el-table>
</el-container>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
export default {
data () {
return {
tableData: [{
code: 440105,
name: '海珠区',
parent: {
code: 4401,
name: '广州市',
},
}, {
code: 440106,
name: '天河区',
parent: {
code: 4401,
name: '广州市',
},
}, {
code: 440303,
name: '罗湖区',
parent: {
code: 4403,
name: '深圳市',
},
}, {
code: 440304,
name: '福田区',
parent: {
code: 4403,
name: '深圳市',
},
}, {
code: 440305,
name: '南山区',
parent: {
code: 4403,
name: '深圳市',
},
}],
}
},
methods: {
handleSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 2) {
// 非第一行,且上一行和当前行的父级代码一致而删除当前单元格
if(rowIndex && this.tableData[rowIndex - 1].parent.code === row.parent.code) {
return [0, 0];
}

// 通过遍历的方式拿到同样父级代码的数量,合并为同一个单元格
// 注意的是后端返回的数据要经过排序,不然会发送错乱。
const len = this.tableData.filter(item => item.parent.code === row.parent.code).length;
return [len, 1];
}
},
}
}

评论