React antd 表格的使用

34 min read

React Antd(Ant Design)提供了丰富的组件库,其中包含了表格(Table)组件的使用。下面是使用React Antd表格的基本步骤:

首先,确保你已经安装了React和Antd。

在需要使用表格的组件中引入Antd和表格组件:

import React from 'react';
import { Table } from 'antd';

定义表格的列配置和数据源:

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Doe',
    age: 28,
    address: '123 ABC Street',
  },
  {
    key: '2',
    name: 'Jane Smith',
    age: 32,
    address: '456 XYZ Street',
  },
];

在组件中使用表格组件,并传入列配置和数据源:

const MyTable = () => {
  return <Table columns={columns} dataSource={data} />;
};

最后,在需要展示表格的地方使用这个组件:

const App = () => {
  return (
    <div>
      <h1>My Table</h1>
      <MyTable />
    </div>
  );
};

以上是React Antd表格的基本用法。你可以根据自己的需求进行定制和扩展,比如添加分页、排序、筛选等功能。更多详细的用法和配置请查阅Antd官方文档。