Ant Design Table - 使用 showQuickJumper 实现快速跳转
showQuickJumper 是 Ant Design Table 组件的一个属性,用于显示一个快速跳转的输入框。当表格数据过多时,可以通过输入页码快速跳转到指定页。使用该属性需要设置 pagination 属性的 showQuickJumper 为 true。
示例代码如下:
import { Table } from 'antd';
const data = []; // 表格数据
const pagination = {
showQuickJumper: true, // 显示快速跳转输入框
pageSize: 10, // 每页显示的条数
total: data.length, // 总条数
onChange: (page) => {
// 切换页码时的回调函数
console.log(page);
}
};
const columns = []; // 表格列配置
const App = () => (
<Table
dataSource={data}
columns={columns}
pagination={pagination}
/>
);
在上述代码中,通过设置 pagination 的 showQuickJumper 为 true,就可以在表格的分页部分显示一个快速跳转的输入框。同时,还可以设置 pageSize 和 total 属性来配置每页显示的条数和总条数。在 onChange 回调函数中可以获取到切换的页码。
原文地址: https://www.cveoy.top/t/topic/qkK3 著作权归作者所有。请勿转载和采集!