element 的官方说明

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

 

element table 行合并 element表格合并列_合并单元格

 

官方代码可以看出, 如果想要合并当前指定的单元格 需要指定合并的rowspan: 合并的行 colspan: 合并的列当直接设置为0的时候就不会显示
因此当指定不同的rowspan 和 colspan的时候就可以设定满足条件的合并单元格
而且 objectSpanMethod 方法是table在渲染每一行的时候就会触发
因此可以通过一个数组记录每行的合并状态

1 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
 2     if(columnIndex === 0) {
 3         if( rowIndex % 2 === 0 ) {
 4             return {
 5                   rowspan: 2,
 6                   colspan: 1
 7             };
 8         }
 9         else {
10             return {
11               rowspan: 0,
12               colspan: 0
13             };
14         }
15     }
16 },

那么,我么可以通过数组记录每一行的合并状态

1 data() {
 2     return {
 3         id_array: [],
 4         id_pos: 0,
 5         tableData: []
 6     }
 7 },
 8 mounted() {
 9     this.id_init()
10 },
11 methods: {
12     id_init() {
13         this.id_array = []
14         this.id_pos = 0
15         for(let i = 0 ; i < this.tableData.length; i++) {
16             // 如果当 i == 0 说明数据是第一行, 需要重新赋值
17             if(i == 0) {
18                 // this.id_array.push(1) 说明这一行数据被显示出来
19                 this.id_array.push(1)
20                 // this.id_pos = 0 重置当前的计数器
21                 this.id_pos = 0
22             }
23             // 说明不是从第一行开始遍历的
24             else {
25                 // 判断当前的指定数据是否和之前的指定数据值相同
26                 if(this.tableData[i].id == this.tableData[i-1].id) {
27                     // 如果相同就需要将 this.id_array 的数据自加
28                     this.id_array[this.id_pos] += 1
29                     // 同时需要将 this.id_array push一个0 表示下一行不用显示
30                     this.id_array.push(0)
31                 }
32                 // 说明 当前的数据和上一行的指定数据不同
33                 else {
34                     // this.id_array.push(1) 说明当前一行的数据需要显示
35                     this.id_array.push(1)
36                     // 重新给计数器赋值
37                     this.id_pos = i
38                 }
39             }
40         }
41     },
42     objectSpanMethod({ row, column, rowIndex, columnIndex }) {
43         // 用于给某一列的table判断是否合并,下标0则是第一列,需要合并多个列可以写多个条件
44         if(columnIndex === 0) {
45             // this.id_array[rowIndex] 取出当前存放行的合并状态
46             const _row = this.id_array[rowIndex] 
47             // 判断当前的 列是否需要显示
48             const _col = _row > 0 ? 1 : 0
49             return {
50                 rowspan: _row,
51                 colspan: _col
52             }
53         }
54     }
55 }

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
}
1 当i == 0 说明当前的索引为 0 需要设置默认的显示数据
2 this.id_array.push(1) 就是用于设置默认第一行的显示
3 this.id_pos = 0 用来重置当前项的位置