🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

引言

Ant Design 是一个流行的 React UI 库，提供了丰富的组件来帮助开发者快速构建美观的用户界面。Table 组件和分页器是 Ant Design 中常用的两个组件，用于展示列表数据和实现数据的分页功能。

Table 组件

Ant Design 的 Table 组件允许开发者轻松地展示和操作数据列表。

基本用法

import { Table } from 'antd';const columns = [{title: 'Name',dataIndex: 'name',key: 'name',},{title: 'Age',dataIndex: 'age',key: 'age',},{title: 'Address',dataIndex: 'address',key: 'address',},
];const data = [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park',},// ...更多数据
];function App() {return <Table columns={columns} dataSource={data} />;
}

分页功能

Table 组件内置了分页功能，可以通过 pagination 属性进行配置。

<Tablecolumns={columns}dataSource={data}pagination={{pageSize: 10, // 每页显示的记录数showSizeChanger: true, // 是否可以改变 pageSizepageSizeOptions: ['10', '20', '30', '40'], // 指定每页可以显示多少条}}
/>

分页器组件

Ant Design 还提供了独立的分页器组件 Pagination，可以在需要时单独使用。

基本用法

import { Pagination } from 'antd';function App() {const handlePageChange = (page, pageSize) => {console.log(page, pageSize);};return <Pagination defaultCurrent={1} total={50} onChange={handlePageChange} />;
}

配置项

分页器组件有许多配置项，可以根据需要进行设置，例如 current（当前页）、pageSize（每页条数）、total（总条数）等。

结论

Ant Design 的 Table 组件和分页器组件为开发者提供了强大的数据展示和分页功能。通过简单的配置，可以快速实现复杂的数据列表和分页交互。在使用这些组件时，建议参考 Ant Design 的官方文档，以了解更多高级用法和定制选项。