antd 中表格分页的使用
时间: 2023-11-27 17:52:19 浏览: 95
antd中的表格分页是非常方便的,只需要在Table组件中添加pagination属性即可。
pagination属性是一个对象,可以设置一些分页相关的属性,如current表示当前页码,pageSize表示每页显示条数,total表示数据总数等。
下面是一个简单的例子:
```jsx
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
function Demo() {
return (
<Table
dataSource={dataSource}
columns={columns}
pagination={{
current: 1,
pageSize: 2,
total: 4,
}}
/>
);
}
export default Demo;
```
在这个例子中,我们定义了一个dataSource数组和一个columns数组作为Table的数据源和列定义,然后将pagination属性设置为一个对象,其中current表示当前页码为1,pageSize表示每页显示2条数据,total表示数据总数为4。这样就实现了一个简单的有分页功能的表格。
阅读全文
相关推荐


















