🤍 前端開發工程師、技術日更博主、已過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 的官方文檔，以了解更多高級用法和定制選項。