在Ant Design的Table组件中,可以通过设置pagination属性中的pageSizeOptions来实现每页显示几条数据的选择器。例如:
import { Table, Select } from 'antd';
const { Option } = Select;
const pageSizeOptions = ['10', '20', '30']; // 可选的每页显示数量
function handlePageSizeChange(value) {
console.log(`每页显示${value}条数据`);
// 在这里处理切换每页显示数量的逻辑
}
function YourComponent() {
return (
<Table
columns={columns}
dataSource={featureProductList}
scroll={{ x: 1500 }}
onChange={tableOnChange}
pagination={{
showSizeChanger: true,
pageSizeOptions: pageSizeOptions,
onShowSizeChange: handlePageSizeChange,
}}
locale={{ emptyText: <Empty description="未查询到数据" /> }}
/>
);
}
在上面的示例代码中,pageSizeOptions定义了可选的每页显示数量,handlePageSizeChange函数用于处理切换每页显示数量时的逻辑。将pagination属性中的showSizeChanger设置为true,即可在表格底部显示选择器。
内容由零声教学AI助手提供,问题来源于学员提问