react Table渲染之滚动条、分页

Posted 2023-03-09

参考技术A 初步开启react

一、Table

<Table

    columns=columns  // 头部每一项  

    dataSource=data.list // 渲染的list

    rowKey=columns => columns.serialNumber  // 需要通过rowKey给table循环提供一个唯一key，取List里的唯一字段均可

    bordered

    scroll=x:4000  // 表头数据特别多时添加滚动条

    pagination=  // 根据ant中pagination组件可以添加相应的参数,此处只简单进行处理

        showSizeChanger: true,   // 分页

        showQuickJumper: true,  // 跳到指定页

        showTotal: (count=data.total)=>  // 显示总数

            return '共'+count+'条数据'

       ,

        pageSizeOptions:['5','10','15','20']  // 每页显示多少条数据数组选项

    

/>

第一次写react项目，一个简单的table渲染让我觉得相对于angular、vue，react的写法更加“与众不同”，需要时间适应，相信不久就可以适应，记录一下最初的感受，等来日熟练掌握时再来回顾一下最开始的心情。

table大量数据无分页- virtualizedtableforantd

参考技术A 项目技术栈 react+antd+axios

antd中的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要不一样，不然会有问题。