一、常见使用场景
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,希望能给读者带来帮助。