一、安装插件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. 是否数据变更后重置滚动条.
});
}, []);
<ProTable
... // 省略code
scroll={x: 1200, y: 400}
rowSelection={
{
onChange: changeSelect,
preserveSelectedRowKeys: true, // 跨页保留之前勾选项
}}
components={VComponents}
/>