在业务场景中经常会出现需要多显示一行汇总行或者平均值行,并且继承colums的fixed配置的需求,设置分页器后,受Table的页长pageSize限制,超出的行数会被截取到第二页显示,Antd已经提供了summary用来解决这个问题,但是还有其他UI库没有实现这个效果,如Tea,所以这里分享一下手动实现过程(以Tea组件为例,其他UI库基本结构属性一致)
使用bottomTip属性(表格底部显示的内容,可用于显示记录创建等,各UI库属性命名不同)
在大表的底部嵌套一个新的表格 colums与大表相同 设置单独class 通过hideHeader性隐藏header
这样就在表格最后一行后伪造了一行新的数据 但是目前这行数据不能同大表格一起滚动
为了同步内外表格的滚动效果 在初始化时获取两个表格tableBody的DOM节点
并对大表的滚动进行监听 当滚动效果发生时 获取大表滚动的scrollLeft 并且将大表的scrollLeft赋值给嵌套的小表
此时会出现大表滚动条滚动时 小表滚动条同步滚动 但是同时小表会随着大表滚动 整体被迫移动(因为小表父盒子在移动)
所以为了伪造小表fixed在大表内的效果 将scrollLeft赋值给小表的marginLeft 通过同步的marginLeft 达到小表始终固定在表格底部不动的视觉效果
隐藏小表滚动条样式 修改小表部分样式 即可达到与大表格一体的效果
此时快速拖动滚动条 会出现小表初始抖动的问题 是因为marginLeft的赋值在滚动之后 小表会先随着大表移动在被marginLeft挤到正常位置
这里通过setTimeout添加异步 修复此问题
至此就可以得到一个自定义表格底部行效果