一、常见使用场景
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/n/237417.html
微信扫一扫 
支付宝扫一扫 