1. Install the plug-in virtuallist-antd
npm install --save virtuallist-antd
2. Set the components attribute of the Protable component in the page.
// 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}
/>