博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
elementUI表格合并单元格
阅读量:6910 次
发布时间:2019-06-27

本文共 1806 字,大约阅读时间需要 6 分钟。

相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:

但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rowspan 的参数需要自己做判断,根据数据的相同行(或列)进行合并;

我们先看下结果:

 代码附上:

1 
40 141 167

详细说明:

:span-method="objectSpanMethod"

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

row: 当前行

column: 当前列

rowIndex:当前行号

columnIndex :当前列号

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

this.spanArr 数组 ,返回的是相对应的行合并行数

这个示例打印出的this.spanArr为 [3, 0, 0, 3, 0, 0],比如,第一个元素为3,表示第一行应该向下合并3行(即第一行的rowspan为3),第二个元素的rowspan为0,就让它“消失”。

rowspan()这个函数就是用来返回 this.spanArr 数组的,定义每一行的 rowspan

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

当到了index为2的时候,if(this.listData[index].type === this.listData[index-1].type ),让第二行与第一行作比较,

如果第二行与第一行相等的话,this.position就+1,当有n行第一行相同,this.position就为n,表示向下合并n行;第二行自己就this.spanArr.push(0),表示第二行“消失”,因为第一行和第二行合并了啊。

如果第二行与第一行不相等的话,那么this.spanArr.push(1);就让第二行自己独占一行;this.position = index意思就是把指针拿到index这行来,表示设置数组this.spanArr[this.position]的元素值,然后定义从此行开始向下合并几行(可能这句话我表述的不是很清楚你可以根据我这个示例研究下,当index为3时,this.position为3,当index为4时,第四行与第三行需要合并,那么在数组的this.position元素就要+1了,也就是this.spanArr[this.position] += 1)

还有最后一句话

const _col = _row>0 ? 1 : 0;

定义的这一个单元格列的合并,我们项目只合并行,不合并列;

_row:代表合并行的行数,_row的值要么是1,或者更大的自然正整数,要么是0。

1代表:独占一行

更大的自然数:代表合并了若干行

0:代表“消失”的哪那一个单元格,后面的单元格向前推一格

转载于:https://www.cnblogs.com/yuwenjing0727/p/10110721.html

你可能感兴趣的文章
Js设置所有连接是触发/swt/的代码
查看>>
JS高级程序设计2nd部分知识要点1
查看>>
mac10.8 更新系统出错
查看>>
'-[UITableViewController loadView] loaded the "XXX" nib but didn't get a UITableView.'
查看>>
ARM裸板开发:07_IIC 通过IIC总线接口读写时钟芯片时间参数实现的总结
查看>>
C# 笔记 如何调用一个有返回值的方法
查看>>
加载静态文件,父模板的继承和扩展
查看>>
高科技犯罪:东欧ATM取款机惊现木马!
查看>>
黑客大赛苹果及微软操作系统均被攻破
查看>>
自由职业者和外包接单项目分析
查看>>
一起谈.NET技术,HTTP协议及POST与GET操作差异,C#中如何使用POST、GET等
查看>>
文明重启怎么做RUST堡垒_文明重启怎么地下建房-地下建房技巧
查看>>
用python画微信捂脸_用 Python 画一个捂脸表情
查看>>
mysql alter float_mysql-数据类型
查看>>
服务器被黑 追寻ip_服务器被如下ip攻击,如何根据ip超找攻击来源
查看>>
java 方差_java计算方差、标准差(均方差)实例代码
查看>>
<<java程序设计>>_Java程序设计
查看>>
java import lang_java.lang
查看>>
java实验Java面向对象编程_Java实验项目 面向对象编程.doc
查看>>
java ldap添加用户名密码_使用用户名和密码的Java LDAP身份验证
查看>>