一、常見使用場景
Ant Design Table是Ant Design中非常常見的一個組件，它主要用於數據的展示與編輯。在Web應用中，Table通常被用於展示後台數據，如訂單列表、用戶列表等等。Ant Design Table受到普及，一方面是因為它的美觀大方、易於使用，另一方面是由於它極易擴展，能夠滿足使用者的多種需求。
下面我們來看一個Ant Design Table的基本用法：
{/* 引入Ant Design組件 */}
import { Table } from 'antd';
{/* 定義表格列 */}
const columns = [
{ title: '用戶名', dataIndex: 'username', key: 'username' },
{ title: '手機號', dataIndex: 'phone', key: 'phone' },
{ title: '郵箱', dataIndex: 'email', key: 'email' },
];
{/* 定義表格數據 */}
const data = [
{ key: '1', username: '張三', phone: '13800000001', email: 'zhangsan@xxx.com' },
{ key: '2', username: '李四', phone: '13800000002', email: 'lisi@xxx.com' },
];
{/* 在渲染函數中渲染表格 */}
function App() {
return (
);
}
export default App;這裡，我們首先在組件內調用了Table組件，其中定義了表格的列（columns）和數據源（dataSource），最後將其渲染到頁面中。實際上這段代碼就可以在你的項目中直接使用。
在以上代碼中，我們只是使用了Table組件的基本用法，它的功能還遠不止於此。
二、Table組件API
Ant Design Table的功能十分豐富，可自定義的API非常之多，下面我們逐一進行介紹。
1. columns
columns是Ant Design Table的核心屬性，表示表格的列。它是一個數組，數組內儲存了表頭對應的各個列的屬性。
const columns = [
{ title: '用戶名', dataIndex: 'username', key: 'username' },
{ title: '手機號', dataIndex: 'phone', key: 'phone' },
{ title: '郵箱', dataIndex: 'email', key: 'email' },
];其中：
- title：表示表頭標題
- dataIndex：表示該列對應的數據源欄位名
- key：表示該列的key值，常用於React數據渲染過程中識別該元素是否需要重新渲染
2. dataSource
dataSource是數據源，表示表格展示的數據。
const data = [
{ key: '1', username: '張三', phone: '13800000001', email: 'zhangsan@xxx.com' },
{ key: '2', username: '李四', phone: '13800000002', email: 'lisi@xxx.com' },
];數據源中的每一個元素代表了表格中的一行數據。數據源中必須包含一個key屬性，否則會出現警告信息。
3. rowSelection
rowSelection用於控制表格的選中狀態，具有如下的屬性：
- type(string)：表示選擇類型，可以是checkbox或radio
- onChange(function(selectedRowKeys, selectedRows))：選中項發生變化時的回調函數
- selectedRowKeys(array[string])：指定選中項的key數組
- getCheckboxProps(function(record))：設置checkbox屬性
import { useState } from 'react';
function App() {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const onSelectedChange = (selectedRowKeys) => {
// 選中項發生變化時的回調函數
setSelectedRowKeys(selectedRowKeys);
};
return (
);
}4. pagination
pagination用於控制表格的分頁功能，具有如下屬性：
- current(number)：當前頁數，從 1 開始
- defaultCurrent(number)：默認的當前頁數
- pageSize(number)：每頁條目數
- defaultPageSize(number)：默認每頁條目數
- total(number)：總條目數
- onChange(function(page, pageSize))：頁碼改變的回調
- showQuickJumper(boolean)：是否可以快速跳轉至某頁
function App() {
return (
);
}5. loading
loading用於設置表格的載入狀態，可以是下面的三種狀態：
- true：展示表格的loading動畫
- {`{ delay: 1000 }`}：在1000ms後再展示loading動畫
- false：表示不顯示loading動畫
function App() {
return (
);
}6. size
size用於設置表格的大小，可選值有middle、small兩種。
function App() {
return (
);
}7. scroll
scroll用於設置表格的滾動，可設置 x、y、{`{ x: number | true, y: number }`}等屬性。
function App() {
return (
);
}8. bordered
bordered用於控制表格是否有邊框。
function App() {
return (
);
}9. expandedRowRender
expandedRowRender用於自定義表格的展開行。
function expandRowRender(record) {
return (
{record.detail}
);
}
function App() {
return (
);
}10. onChange
onChange函數是表格數據變化的回調，可以拿到變化後的Pagination等信息。
function onChange(pagination, filters, sorter, extra) {
console.log(pagination, filters, sorter, extra);
}
function App() {
return (
);
}三、總結
Ant Design Table是一個功能豐富、易擴展的表格組件，在前端開發中具有重要的作用。本文簡要介紹了Ant Design Table的常見使用場景，以及詳細解釋了其主要API，希望能給讀者帶來幫助。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/237417.html
微信掃一掃 
支付寶掃一掃 