table大量数据无分页- virtualizedtableforantd
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了table大量数据无分页- virtualizedtableforantd相关的知识,希望对你有一定的参考价值。
参考技术A 项目技术栈 react+antd+axiosantd中的table组件基本默认的是数据有分页的情况,实际业务中会有这种情况,需要一次性展示接口返回的全部数据,后台不做分页,假如有1000条数据,则直接返回1000条数据,供用户操作。
大量数据时候要对表格进行操作的话,性能就很低,会出现页面卡死的情况。这时候就需要优化表格性能了。
刚开始想用antd的list中的滚动加载无限长度列表组件,下面是对react-virtualized的介绍
但是这个组件里面使用的list,我需要对table进行多选框的各种操作,就放弃了这种方式,当然若是不需要这种操作,可以直接使用antd这个list的组件了。
然后问度娘,度娘给我提供了个插件 virtualizedtableforantd 完美解决了我这个问题。
使用方法
就这样就完美的解决了性能的问题。这里y:500是确定了这个table的高度为500,加载完数据后,就展示500高度的数据,当向下滑动滚动条后,就开始加载后面的数据。这样就解决了table数据过多的性能问题了。
注意VTComponents( id: 1000 )里面id一定是number类型,若有多个table用到了这个插件,记得id要不一样,不然会有问题。
以上是关于table大量数据无分页- virtualizedtableforantd的主要内容,如果未能解决你的问题,请参考以下文章
Virtual Memory PAGE TABLE STRUCTURE