Ant Design 表格分页教程：快速实现数据分页显示

在使用 Ant Design 进行前端开发时，表格是最常用的组件之一。当数据量较大时，为了提升用户体验，我们需要对表格数据进行分页展示。本教程将带你一步步实现 Ant Design 表格的分页功能。

1. 引入组件

首先，我们需要引入 Table 和 Pagination 组件：jsximport { Table, Pagination } from 'antd';

2. 定义表格数据和列

接下来，定义表格的数据源和列：jsxconst columns = [ // 列定义，例如： { title: '姓名', dataIndex: 'name', key: 'name', }, { title: '年龄', dataIndex: 'age', key: 'age', },];

const data = [ // 表格数据，例如： { key: '1', name: '张三', age: 32, }, { key: '2', name: '李四', age: 24, }, // ...更多数据];

3. 实现分页功能

我们可以通过以下步骤实现分页功能：

关闭表格自带分页：设置 Table 组件的 pagination 属性为 false。- 使用 Pagination 组件：在表格下方使用 Pagination 组件来自定义分页。- 监听分页变化：监听 Pagination 组件的 onChange 事件，根据页码和每页显示条数更新表格数据。jsxconst App = () => { const [currentPage, setCurrentPage] = useState(1); const [pageSize, setPageSize] = useState(10);

const handlePageChange = (page, newPageSize) => { setCurrentPage(page); setPageSize(newPageSize); // 根据页码和每页显示条数获取当前页的数据 // ... };

return (

);};

4. 从后端获取数据

如果需要从后端获取数据，可以在 handlePageChange 函数中根据页码和每页显示条数向后端请求对应的数据。jsxconst handlePageChange = (page, pageSize) => { // 发送请求获取数据 fetch(/api/data?page=${page}&pageSize=${pageSize}) .then(res => res.json()) .then(data => { // 更新表格数据 });};

总结

通过以上步骤，我们就可以在 Ant Design 中轻松实现带分页的表格。记住根据实际需求调整代码，例如自定义分页样式、处理加载状态等。希望这篇教程对你有所帮助！