ag-grid自定义滚动条后快速滑动致使有些列无法完全显示内容的问题

项目中要显示一些table数据,我们用的是ag-grid。前几天客户报出了一个问题。当列很多的时候向右滑动滚动条,最后一列的数据经常出现被截的情况。我第一反应是不是ag-grid的一个bug。到他们官方网站上试了几个demo,都没有出现这个问题。辣么的丝滑……。观察发现我们滚动条和ag-grid默认的不一样。特别是快速滑动的时候,会出现很多列都没显示出来的现象。感觉问题应该是出在这里。于是就顺着线索找了过去。果然我们的SCSS中定义了一个自定义滚动条的mixin。我注释掉它之后问题就没有了。找到问题出在哪里了,下面就要尝试寻找解决方案了。

方案 1: 看到自定义滚动条是加在ag-grid的container上的。猜想是不是表渲染新列的时候,这个样式会导致ag-grid的宽度计算出错。于是把自定义滚动条提到全局层面。测试后果然没有问题了。因为我们要支持多主题,尝试把自定义滚动条样式从全局层面往下放到各个主题文件中时这个问题又出现了。这个方向暂时没有找到合适的方案。如果没有多主题需求这个方案是可以的。

方案 2: 给ag-grid的container预留出滚动条的空间。我是通过加padding实现的。这样有可能解决ag-grid宽度计算的问题。试了一下,原先的问题解决了。但是最后一列后面会多出一个与滚动条等宽的空间。

最后我们选择了方案2,那个小的瑕疵影响不大勉强可以接受。对于方案1还要花时间继续研究一下,看看能不能完美解决。

你可能感兴趣的:(ag-grid自定义滚动条后快速滑动致使有些列无法完全显示内容的问题)