React Antd 分页表格完整教程与代码示例
React Antd 分页表格完整教程
这篇教程将引导你使用 Ant Design (Antd) 组件库创建功能齐全的分页表格。我们将涵盖以下内容：
- 使用
Table和Pagination组件- 异步加载数据- 处理分页事件- 自定义表格样式
代码示例jsximport React, { useState, useEffect } from 'react';import { Table, Pagination } from 'antd';
const App = () => { const [data, setData] = useState([]); const [loading, setLoading] = useState(false); const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0, });
useEffect(() => { fetchData(); }, [pagination.current, pagination.pageSize]);
const fetchData = () => { setLoading(true); // 模拟异步请求数据 setTimeout(() => { const dataSource = []; for (let i = 1; i <= 100; i++) { dataSource.push({ key: i, name: User ${i}, age: 20 + i, address: Address ${i}, }); } setData(dataSource.slice((pagination.current - 1) * pagination.pageSize, pagination.current * pagination.pageSize)); setLoading(false); setPagination((prevPagination) => ({ ...prevPagination, total: 100, })); }, 1000); };
const handlePageChange = (page, pageSize) => { setPagination((prevPagination) => ({ ...prevPagination, current: page, pageSize, })); };
const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ];
return (
${range[0]}-${range[1]} of ${total} items } style={{ marginTop: '16px', textAlign: 'right' }} /> export default App;
代码解释
- 导入组件: 我们从 'antd' 导入
Table和Pagination组件。2. 状态管理: 使用useState钩子管理表格数据 (data)， 加载状态 (loading)，以及分页信息 (pagination)。3. 数据获取:useEffect钩子在组件挂载和pagination发生变化时触发fetchData函数。fetchData函数模拟异步获取数据， 并更新状态。4. 分页处理:handlePageChange函数在用户点击分页按钮时更新pagination状态， 触发数据重新加载。5. 表格渲染:Table组件展示数据，pagination属性设置为false以禁用自带分页。6. 自定义分页:Pagination组件用于自定义分页，并通过onChange属性监听分页变化。
总结
通过本教程， 你学习了如何使用 Antd 创建带分页的表格，并了解了数据获取、分页处理以及自定义样式等关键步骤。
原文地址: https://www.cveoy.top/t/topic/fAIM 著作权归作者所有。请勿转载和采集!