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