介绍

Ant Design是一个非常出色的React UI组件库，今天来介绍一下如何使用Ant Design的Table组件。Table组件在数据可视化方面有非常广泛的应用，对于展示列表数据非常有用。在实际开发工作中，也是必须要掌握的一个组件。

创建React项目和安装Ant Design的过程我就省略了，大家直接参照官网即可，下面直接开始介绍Table组件的使用。我们要开发一个用户管理页面，用于展示用户列表数据。

定义用户数据结构

首先定义一下用户类型信息，这个类型后续要被很多地方使用。

export interface User {
  id: number; // 用户ID
  name: string; // 姓名
  email: string; // 邮箱
  phone: string; // 手机号
}

创建获取用户数据的API

兵马未动，粮草先行，为了获取用户数据，我们先创建一个API，可以在src/api目录下新建一个UserAPI.ts文件，模拟获取用户数据的API - fetchUsers。这个API使用Promise + setTimeout模拟异步请求，1秒后返回一个用户列表数据。

import { User } from "./User";

export async function fetchUsers() {
  const users: User[] = [
    { id: 1, name: 'Philip', email: 'philip@mail.google.com', phone: '13012345678' },
    { id: 2, name: 'Richard', email: 'richard@mail.google.com', phone: '15012345678' },
  ];

  return new Promise<{ data: User[] }>((resolve) => {
    setTimeout(() => {
      resolve({ data: users });
    }, 1000); // 1秒后返回数据
  });
}

创建用户页面

在项目的src/pages目录下新建一个users目录，然后在该目录下新建一个index.tsx文件，作为用户页面的入口。初始代码很简单，就是引入Ant Design的Table组件并渲染一个空表格。

import Table from 'antd/es/table';

export default function Users() {
  return (
    <Table></Table>
  )
}

为Table组件添加数据源

接下来，我们需要在Users组件中使用useEffect钩子来获取用户数据，并将其传递给Table组件。我们还需要定义一个状态来存储用户数据。

const [users, setUsers] = useState<User[]>([]);

useEffect(() => {
  fetchUsers().then(response => {
    setUsers(response.data);
  });
}, []);

return <Table dataSource={tableData}></Table>;

此时运行App，你会看到一个空的表格，因为表格的Columns还没有定义。接下来我们定义Columns。Columns决定了表格的每一列都显示什么。

定义表格的Columns

Columns是一个数组，数组中每一个元素对应表格中的一列，每个列需要如下属性：

title：列的标题 - 这个用于显示在表头
dataIndex：列对应的数据字段 - 这个用于从数据中获取对应的值并显示到表格中
key：列的唯一标识符

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
  }
];

此时再运行npm run start，你就可以看到表格中的数据了。

完整代码如下：

import Table from 'antd/es/table';
import { useEffect, useState } from 'react';
import { User } from './User';
import { fetchUsers } from './UserAPI';

export default function Users() {
  const [tableData, setTableData] = useState<User[]>([]);

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
  ];

  useEffect(() => {
    fetchUsers().then((res) => {
      setTableData(res.data);
    });
  }, []);

  return <Table dataSource={tableData} columns={columns}></Table>;
}

好了，今天就到这里，在后续的文章中，我们会逐步完善这个管理页面，添加更多的功能，随着功能的增加，我们会逐步介绍Ant Design的其他组件和用法。