Ant design table组件最全分页用法
最全分页用法
const pageOnChange = (val) => {
console.log(val);
};
const pageSizeChange = (page, pageSize) => {
console.log(pageSize);
};
<Table
columns={columns}
dataSource={dataSource}
pagination={{
hideOnSinglePage: true, // 只有一页时不显示分页
showTotal: () => `共 ${page?.totalSize} 条`, // 显示总共有多少条
total: page?.totalSize, // 总共有多少条
onChange: pageOnChange, // 页码变化回调函数
showQuickJumper: true, // 是否显示快速跳转
current: currentPage, // 当前active的页码
showSizeChanger: true, // 是否显示页面大小变化选择框
onShowSizeChange: pageSizeChange, //页面大小变化回调函数
pageSizeOptions: ["10", "20", "50"], // 页面大小变化选择框中可选变化
}}
/>
效果