antd table分页_table大量数据无分页- virtualizedtableforantd

项目技术栈 react+antd+axios

antd中的table组件基本默认的是数据有分页的情况,实际业务中会有这种情况,需要一次性展示接口返回的全部数据,后台不做分页,假如有1000条数据,则直接返回1000条数据,供用户操作。

大量数据时候要对表格进行操作的话,性能就很低,会出现页面卡死的情况。这时候就需要优化表格性能了。

刚开始想用antd的list中的滚动加载无限长度列表组件,下面是对react-virtualized的介绍

结合 react-virtualized 实现滚动加载无限长列表,带有虚拟化(virtualization)功能,能够提高数据量大时候长列表的性能。

virtualized 是在大数据列表中应用的一种技术,主要是为了减少不可见区域不必要的渲染从而提高性能,特别是数据量在成千上万条效果尤为明显。了解更多

但是这个组件里面使用的list,我需要对table进行多选框的各种操作,就放弃了这种方式,当然若是不需要这种操作,可以直接使用antd这个list的组件了。

然后问度娘,度娘给我提供了个插件 virtualizedtableforantd 完美解决了我这个问题。

使用方法

import React from 'react'

import { Table,} from 'antd'

import {VTComponents} from 'virtualizedtableforantd'

class Demo extends React.Component {

render(){

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值