Antd table性能优化

#1

antd Table数据量1000以上， 批量选择时很卡，各位大佬有没有较好的优化方法（不要提分页，要求是不分页）

1 Like
#2

可不可以问下，你的1000条是怎么选的？
如果是一次性选中那么多条，确实卡的

#3

看看 react-virtualized

#4

有这样的场景，就是和普通全选一样，只不过数据量比较大

#5

这个也看了，之前一个项目也有用到
但是现在有用到antd table的其他功能，筛选，排序什么的，这个貌似不能和antd table结合
如果方便的话？大佬可否给一个例子

#6

我的一个建议是：

  1. 只加载当前屏幕的高度可容纳的表格条数，
  2. 懒加载后续的表格条数，然后依据全选的状态，自动填充该条被选中的状态
#7

这是一个经典的问题，也有经典的解决办法
1、dom回收
2、懒加载视口外的行

这其实是antd默认要做的优化，如果通过他的api解决不了，就需要考虑自己写个table

#8

我这里也遇到同样的问题，目前使用的方式就是楼上说的懒加载视口外的行，可以使用react-lazyload包裹每一行

#9

大佬有没有例子，如果有那就太感谢了

#10


facebook官方开源的一个table组件，此table实现方式很值得学习。
用起来也很方便，日常项目需求完全够用。

#11

这个需要传入固定的行的高度和展开行的高度

#12

使用IntersectionObserver API监听每一行，可以在每一行离开可视区域后替换成一个相等高度的空的一行，进入可视区域才显示真正的行

#13

是的，这个需要传入高和宽

#14

请问大佬你是自己写的Table吗？antd的table我看了没法给每一行包裹元素啊

#15

在antd table中使用虚表

#16

试试这个呢，可以支持10000条数据，不需要任何处理。https://sheinsight.github.io/shineout/1.3.x/cn/components/Table

#17

每行高度固定的情况下，react-window的VariableSizeGrid组件结合table的Api（components.body.wrapper），自定义渲染tbody，可以解决批量选择卡顿的问题，同时也要结合rc-resize-observer监听宽度变化修改部分宽度渲染业务。亲测可实现:grinning::grinning:。

#18

要么基于react-virtualized自己封装
要么升级antd到4.x 所有的list官方支持了基于virtualized的长列表加载优化