element table 合并单元格

抑郁使你厌倦世界,理智使你苟延残喘

前端QQ群: 981668406
在此附上我的QQ: 2489757828 有问题的话可以一同探讨
我的github: 李大玄
我的私人博客: 李大玄
我的: 李大玄
我的CSDN: 李大玄

在这里插入图片描述

template


解释

 rowspan()这个函数就是用来返回 spanArr 数组的,
定义每一行的 rowspan
if( index === 0),第一行,直接先给数组 push 进一个1,表示自己先占一行,
position 是数组元素的位置 (此时是从数组元素的第一个开始,所以position 为 0), position为 0 意思表示的就是数组的第一个元素。

当到了 index 为 2 的时候,if(this.listData[index][spanName] === this.listData[index-1][spanName]),
让第二行与第一行作比较:
(1)如果第二行与第一行相等的话,position 就 +1,当有 n 行第一行相同,position 就为 n,表示向下合并 n 行;
第二行自己就 spanArr.push(0),表示第二行“消失”,因为第一行和第二行合并了;
(2)如果第二行与第一行不相等的话,那么 spanArr.push(1);就让第二行自己独占一行;
position = index :把指针拿到 index 这行来,表示设置数组 spanArr[position] 的元素值,然后定义从此行开始向下合并几行
(可以根据示例研究下,当 index 为 2 时,position 为 2,当 index 为 3 时,第四行与第三行需要合并,
那么在数组的 position 元素就要 +1 了,也就是 spanArr[position] += 1)
:span-method="objectSpanMethod" 

这个是官方给定的绑定属性和对应的方法,objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
row: 当前行
column: 当前列
rowIndex:当前行号
columnIndex :当前列号

该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表 colspan。
也可以返回一个键名为 rowspan 和 colspan 的对象。

const _col = _row > 0 ? 1 : 0;  定义的这个单元格列的合并,我们项目只合并行,不合并列;

_row:代表合并行的行数,_row 的值要么是 1,或者更大的自然正整数,要么是 0。
1代表:独占一行
更大的自然数:代表合并了若干行
0:代表“消失”的哪那一个单元格,后面的单元格向前推一格

js


你可能感兴趣的:(element table 合并单元格)