最新发现:antd中Table组件自带有virtual属性,可设置为虚拟列表。暂未实际测试。
一、安装插件virtuallist-antd
npm install --save virtuallist-antd
二、在页面中设置Protable组件的components属性即可。
// demo.tsx
import { useMemo } from 'react';
import { VList } from 'virtuallist-antd';
const VComponents = useMemo(() => {
// 使用VList 即可有虚拟列表的效果
return VList({
height: 400, // 此值和scrollY值相同. 必传. (required).
resetTopWhenDataChange: false, // 默认为true. 是否数据变更后重置滚动条.
});
}, []);
// _selectedRowKeys为勾选的rowKey对应的字段值集合
const changeSelect = (_selectedRowKeys: string|number[], selectedRows: Record<string, any>[]) => {
setSelectedList(selectedRows);
};
<ProTable
... // 省略code
scroll={x: 1200, y: 400}
rowKey="id"
rowSelection={{
onChange: changeSelect,
preserveSelectedRowKeys: true, // 跨页保留之前勾选项
}}
components={VComponents}
/>