您的位置:

Ant Design Table详解

一、常见使用场景

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,希望能给读者带来帮助。