Ant Design实现表格行置顶功能

最近遇到客户一个需求,在之前的《Ant Design中实现表格的滚动加载》中基础上,用户滚动表格的时候,需要将特定的行置顶,比如合计这一行。这种在excel上显而易见的操作的方式,基于ant design的Table组件实现起来还有点麻烦,本文记录一下解决问题的过程,以供参考。

效果图

大约的需要如下。

在表头的下方会有一行,显示合计的数目,这一行客户希望在表格滚动的时候,贴到顶部就停在那里。

官方API

首先想到的是去看一下官方的API,很遗憾没有(ant design表格功能属实有点不太强)。既然官方不支持,只能自己去hack解决方案。

JS的方式实现

首先想到的是JS的方式,监听页面的滚动,但这个页面在之前的文章《Ant Design中实现表格的滚动加载》也提到过,已经监听了滚动了,再把这个逻辑加进去倒也行。

这种实现方式的好处是兼容性好,缺点就是挺麻烦的,处理不好也会影响页面性能。

更优雅的CSS实现

CSS的Position有个sticky属性,就是正好针对这个需求实现的,之前一段时间Chrome放弃支持,但后续的版本又陆续支持了,看了一下兼容性。

这个兼容力度在客户的场景中是完全OK的,于是使用ant design 中的 Table 组件的rowClassName来查找特定的数据行,并赋予给特定的className,然后给这个类赋予sticky属性就可以了。

1.highlightRow {
2  background-color: #FFC900;
3  position: sticky;
4  top: 0;
5}

小结

随着CSS的发展,能用CSS解决的问题,就不必用JS了,以前JS需要上百行代码实现的能力,用CSS可能就是一行搞定。