帮我写一个前端页面,使用react,组件使用antd,页面中需要有一个表格,表格包含序号、名称、创建日期。表格可以分页显示
时间: 2023-02-07 19:43:24 浏览: 80
好的,下面是一个使用 React 和 Antd 实现的带有分页的表格的示例:
```
import { Table, Pagination } from 'antd';
const columns = [
{
title: '序号',
dataIndex: 'id',
},
{
title: '名称',
dataIndex: 'name',
},
{
title: '创建日期',
dataIndex: 'date',
},
];
const data = [
{
key: 1,
id: 1,
name: 'John Brown',
date: '2020-01-01',
},
{
key: 2,
id: 2,
name: 'Jim Green',
date: '2020-01-02',
},
// 更多数据
];
function App() {
const [currentPage, setCurrentPage] = useState(1);
const pageSize = 10;
// 分页处理函数
function handlePageChange(page) {
setCurrentPage(page);
}
return (
<div>
<Table
columns={columns}
dataSource={data}
pagination={false}
/>
<Pagination
current={currentPage}
pageSize={pageSize}
onChange={handlePageChange}
total={data.length}
/>
</div>
);
}
export default App;
```
在这个示例中,我们使用 Antd 的 `Table` 组件和 `Pagination` 组件来实现表格和分页功能。我们使用 `columns` 数组定义表格的列信息,使用 `data` 数组定义表格的数据,然后将这两个数组作为 `Table` 组件的 `columns` 和 `dataSource` 属性传入即可。我们还使用了一个状态变量 `currentPage` 和一个分页处理函数 `handlePageChange` 来控制分页组件的当前页和分页变化的处理。
希望这个示例对你有帮助。