Tea、Antd表格增加一行显示

1,284 阅读2分钟

在业务场景中经常会出现需要多显示一行汇总行或者平均值行,并且继承colums的fixed配置的需求,设置分页器后,受Table的页长pageSize限制,超出的行数会被截取到第二页显示,Antd已经提供了summary用来解决这个问题,但是还有其他UI库没有实现这个效果,如Tea,所以这里分享一下手动实现过程(以Tea组件为例,其他UI库基本结构属性一致)

image.png

使用bottomTip属性(表格底部显示的内容,可用于显示记录创建等,各UI库属性命名不同)

在大表的底部嵌套一个新的表格 colums与大表相同 设置单独class 通过hideHeader性隐藏header

这样就在表格最后一行后伪造了一行新的数据 但是目前这行数据不能同大表格一起滚动

image.png 为了同步内外表格的滚动效果 在初始化时获取两个表格tableBody的DOM节点

并对大表的滚动进行监听 当滚动效果发生时 获取大表滚动的scrollLeft 并且将大表的scrollLeft赋值给嵌套的小表

此时会出现大表滚动条滚动时 小表滚动条同步滚动 但是同时小表会随着大表滚动 整体被迫移动(因为小表父盒子在移动)

所以为了伪造小表fixed在大表内的效果 将scrollLeft赋值给小表的marginLeft 通过同步的marginLeft 达到小表始终固定在表格底部不动的视觉效果

隐藏小表滚动条样式 修改小表部分样式 即可达到与大表格一体的效果

此时快速拖动滚动条 会出现小表初始抖动的问题 是因为marginLeft的赋值在滚动之后 小表会先随着大表移动在被marginLeft挤到正常位置

这里通过setTimeout添加异步 修复此问题

至此就可以得到一个自定义表格底部行效果