Element中table表格合并横向单元格
通过给table传⼊span-method⽅法可以实现合并⾏或列，⽅法的参数是⼀个对象，⾥⾯包含当前⾏row、当前列column、当前⾏
号rowIndex、当前列号columnIndex四个属性。该函数可以返回⼀个包含两个元素的数组，第⼀个元素代表rowspan，第⼆个元素代
表colspan。也可以返回⼀个键名为rowspan和colspan的对象。
官⽅代码可以看出, 如果想要合并当前指定的单元格需要指定合并的rowspan: 合并的⾏colspan: 合并的列当直接设置为0的时候就不会显⽰因此当指定不同的rowspan和colspan的时候就可以设定满⾜条件的合并单元格
⽽且objectSpanMethod⽅法是table在渲染每⼀⾏的时候就会触发
因此可以通过⼀个数组记录每⾏的合并状态
1 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
2if(columnIndex === 0) {
3if( rowIndex % 2 === 0 ) {
4return {
5                  rowspan: 2,
6                  colspan: 1
7            };
8        }
9else {
10return {
11              rowspan: 0,
12              colspan: 0
13            };
14        }
15    }
16 },
那么，我么可以通过数组记录每⼀⾏的合并状态
1 data() {
2return {
3        id_array: [],
4        id_pos: 0,
5        tableData: []
6    }
7 },
8 mounted() {
9this.id_init()
10 },
11 methods: {
12    id_init() {
13this.id_array = []
14this.id_pos = 0
15for(let i = 0 ; i < this.tableData.length; i++) {
16// 如果当 i == 0 说明数据是第⼀⾏, 需要重新赋值
17if(i == 0) {
18// this.id_array.push(1) 说明这⼀⾏数据被显⽰出来
19this.id_array.push(1)
20// this.id_pos = 0 重置当前的计数器
21this.id_pos = 0
22            }
23// 说明不是从第⼀⾏开始遍历的
24else {
25// 判断当前的指定数据是否和之前的指定数据值相同
26if(this.tableData[i].id == this.tableData[i-1].id) {
27// 如果相同就需要将 this.id_array 的数据⾃加
28this.id_array[this.id_pos] += 1
29// 同时需要将 this.id_array push⼀个0 表⽰下⼀⾏不⽤显⽰
30this.id_array.push(0)
31                }
32// 说明当前的数据和上⼀⾏的指定数据不同
33else {
34// this.id_array.push(1) 说明当前⼀⾏的数据需要显⽰
35this.id_array.push(1)
element表格横向滚动条36// 重新给计数器赋值
37this.id_pos = i
38                }
39            }
40        }
41    },
42    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
43// ⽤于给某⼀列的table判断是否合并，下标0则是第⼀列，需要合并多个列可以写多个条件
44if(columnIndex === 0) {
45// this.id_array[rowIndex] 取出当前存放⾏的合并状态
46            const _row = this.id_array[rowIndex]
47// 判断当前的列是否需要显⽰
48            const _col = _row > 0 ? 1 : 0
49return {
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 需要设置默认的显⽰数据
2this.id_array.push(1) 就是⽤于设置默认第⼀⾏的显⽰
3this.id_pos = 0 ⽤来重置当前项的位置

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。