React antd组件Table的使用：轻松构建高级表格

用 React Ant Design Table 构建强大且美观的表格

当你在项目中需要展示和操作数据时，React Ant Design 的 Table 组件是一个强大的工具。它具有丰富的功能和直观的用户界面，可帮助你轻松构建高级表格。让我们深入了解 Table 组件及其众多功能。

搜索：轻松过滤你的数据

Table 组件支持搜索功能，让你可以通过输入关键词来过滤表格中的数据。你可以使用 filter() 方法轻松实现此功能。

import { Table } from 'antd';

const data = [
  { key: 1, name: 'John', age: 30, gender: 'male' },
  { key: 2, name: 'Jane', age: 25, gender: 'female' },
];

const columns = [
  { title: 'Name', dataIndex: 'name', filterDropdown: () => {}, },
];

<Table columns={columns} dataSource={data} />;

下拉搜索：通过下拉菜单进行过滤

Table 组件还支持下拉搜索功能，允许用户从一个下拉列表中选择来过滤数据。可以使用 selectFilter() 方法轻松实现此功能。

import { Table, Select } from 'antd';

const data = [
  { key: 1, name: 'John', age: 30, gender: 'male' },
  { key: 2, name: 'Jane', age: 25, gender: 'female' },
];

const columns = [
  { title: 'Gender', dataIndex: 'gender', filters: [{ text: 'Male', value: 'male' }, { text: 'Female', value: 'female' }], filterDropdown: ({ setSelectedKeys, selectedKeys }) => (
    <Select 
      mode="multiple" 
      allowClear 
      value={selectedKeys} 
      onChange={(value) => setSelectedKeys(value)}
    >
      <Option value="male">Male</Option>
      <Option value="female">Female</Option>
    </Select>
  )},
];

<Table columns={columns} dataSource={data} />;

批量删除：告别手动操作

批量删除功能允许用户选择要删除的行，然后点击“删除”按钮以删除它们。你可以使用 selectedRowKeys 和 onDelete() 方法实现此功能。

import { Table, Button } from 'antd';

const data = [
  { key: 1, name: 'John', age: 30, gender: 'male' },
  { key: 2, name: 'Jane', age: 25, gender: 'female' },
];

const columns = [
  { title: 'Name', dataIndex: 'name' },
];

const onDelete = (selectedRowKeys) => {
  // 这里删除数据
};

<Table columns={columns} dataSource={data} onDelete={onDelete} />;

时间筛选：根据时间范围过滤数据

Table 组件提供时间筛选功能，允许用户选择一个时间段来过滤数据。可以使用 rangePicker() 方法轻松实现此功能。

import { Table, RangePicker } from 'antd';

const data = [
  { key: 1, name: 'John', age: 30, dob: '2000-01-01' },
  { key: 2, name: 'Jane', age: 25, dob: '2001-02-02' },
];

const columns = [
  { title: 'Name', dataIndex: 'name' },
  { 
    title: 'Date of Birth', 
    dataIndex: 'dob', 
    render: (value) => moment(value).format('YYYY-MM-DD'),
    filters: [
      { text: '2000', value: '2000' }, 
      { text: '2001', value: '2001' }
    ],
    filterDropdown: ({ setSelectedKeys, selectedKeys }) => (
      <RangePicker 
        value={selectedKeys} 
        onChange={(value) => setSelectedKeys(value)}
      />
    )
  },
];

<Table columns={columns} dataSource={data} />;

添加按钮：轻松添加新数据

添加按钮允许用户点击按钮来添加一行新数据。你可以使用 onCreate() 方法实现此功能。

import { Table, Button } from 'antd';

const data = [
  { key: 1, name: 'John', age: 30, gender: 'male' },
  { key: 2, name: 'Jane', age: 25, gender: 'female' },
];

const columns = [
  { title: 'Name', dataIndex: 'name' },
];

const onCreate = (values) => {
  // 这里添加数据
};

<Table columns={columns} dataSource={data} onCreate={onCreate} />;

页码跳转：轻松切换数据页

页码跳转功能允许用户在表格的多个页面之间切换。你可以使用 pagination() 方法轻松实现此功能。

import { Table } from 'antd';

const data = [
  { key: 1, name: 'John', age: 30, gender: 'male' },
  { key: 2, name: 'Jane', age: 25, gender: 'female' },
  // ... 省略更多数据
];

const columns = [
  { title: 'Name', dataIndex: 'name' },
];

<Table columns={columns} dataSource={data} pagination={{ pageSize: 10 }} />;

查询和重置按钮：轻松管理搜索条件

查询和重置按钮允许用户点击“查询”按钮来执行搜索操作，点击“重置”按钮来清除搜索条件。你可以使用 onSearch() 和 onReset() 方法实现此功能。

import { Table, Button } from 'antd';

const data = [
  { key: 1, name: 'John', age: 30, gender: 'male' },
  { key: 2, name: 'Jane', age: 25, gender: 'female' },
];

const columns = [
  { title: 'Name', dataIndex: 'name' },
];

const onSearch = (values) => {
  // 这里执行搜索操作
};

const onReset = () => {
  // 这里清除搜索条件
};

<Table columns={columns} dataSource={data} onSearch={onSearch} onReset={onReset} />;

表单回填：轻松编辑数据

表单回填功能允许用户点击“编辑”按钮来打开一个表单，然后在表单中修改数据。你可以使用 initialValues() 方法实现此功能。

import { Table, Form, Input } from 'antd';

const data = [
  { key: 1, name: 'John', age: 30, gender: 'male' },
  { key: 2, name: 'Jane', age: 25, gender: 'female' },
];

const columns = [
  { title: 'Name', dataIndex: 'name' },
];

const onEdit = (record) => {
  // 这里打开表单
};

<Table columns={columns} dataSource={data} onEdit={onEdit} />;

表单的查看不能修改：readOnly

表单的查看不能修改功能允许用户点击“查看”按钮来打开一个表单，但是不能修改表单中的数据。你可以使用 readOnly() 方法实现此功能。

import { Table, Form, Input } from 'antd';

const data = [
  { key: 1, name: 'John', age: 30, gender: 'male' },
  { key: 2, name: 'Jane', age: 25, gender: 'female' },
];

const columns = [
  { title: 'Name', dataIndex: 'name' },
];

const onView = (record) => {
  // 这里打开只读表单
};

<Table columns={columns} dataSource={data} onView={onView} />;

有Modal弹出的使用：展示数据详细信息

有Modal弹出的使用允许用户点击“详情”按钮来打开一个Modal，然后在Modal中查看数据的详细信息。你可以使用 modal() 方法实现此功能。

import { Table, Button, Modal } from 'antd';

const data = [
  { key: 1, name: 'John', age: 30, gender: 'male' },
  { key: 2, name: 'Jane', age: 25, gender: 'female' },
];

const columns = [
  { title: 'Name', dataIndex: 'name' },
];

const onDetails = (record) => {
  // 这里打开Modal
};

<Table columns={columns} dataSource={data} onDetails={onDetails} />;

结论