Ant Design：表格如何使用?

Ant Design 的 Table 组件用于展示数据表格。以下是如何使用 Ant Design 的 Table 组件的基本步骤和示例代码：

1. 安装 Ant Design 库（如果尚未安装）：

npm install antd --save

2. 在你的组件中引入 Table 组件及其样式：

import { Table } from 'antd';
import 'antd/dist/antd.css';

3. 定义数据源，通常是一个包含多个对象的数组，每个对象代表一行数据：

const dataSource = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  // ... 更多数据
];

4. 定义列的配置，指定列的标题和数据源中对应的键：

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

5. 在你的组件中渲染 Table 并传入数据源和列配置：

const App = () => (
  <Table dataSource={dataSource} columns={columns} />
);

完整示例代码：

import React from 'react';
import { Table } from 'antd';
import 'antd/dist/antd.css';
 
const dataSource = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  // ... 更多数据
];
 
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];
 
const App = () => (
  <Table dataSource={dataSource} columns={columns} />
);
 
export default App;

这样就可以在你的应用中展示一个基本的表格了。Ant Design 的 Table 组件还支持许多高级功能，如排序、筛选、分页、自定义渲染等，通过传递不同的属性和方法，可以实现这些功能。