Antd表格通用列筛选配置指南

2023-10-13 07:40:14

Antd Table列筛选指南：轻松实现数据过滤

背景介绍

在当今数据驱动的时代，数据表格在各种应用程序中扮演着至关重要的角色。作为React生态系统中广受欢迎的UI组件库，Ant Design的Table组件凭借其丰富的特性和灵活的API，为开发人员提供了构建强大、可交互式数据表格的工具。本文旨在深入探讨Antd Table的通用列筛选配置，指导您轻松实现表格数据的按需过滤和筛选。

基本配置

为了在表格中启用列筛选，需要在filterDropdown属性中配置筛选功能。通过此属性，您可以指定自定义筛选组件，该组件定义筛选交互的实现。以下代码示例展示了如何为“姓名”列配置筛选功能：

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => {
      return (
        <MultiSelect
          value={selectedKeys}
          onChange={(selectedKeys) => setSelectedKeys(selectedKeys)}
          options={options}
          onConfirm={confirm}
          onCancel={clearFilters}
        />
      );
    },
  },
];

在这个示例中，MultiSelect组件用于创建下拉菜单，允许用户选择多个筛选值。当用户点击列标题旁边的筛选图标时，下拉菜单就会出现。

搜索功能

为了提供更细粒度的筛选体验，您可以配置搜索功能，允许用户通过输入内容来搜索数据。这可以通过在filterDropdown属性中添加一个输入框来实现：

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => {
      return (
        <div>
          <Input
            value={selectedKeys[0]}
            onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={confirm}
            style={{ width: 188, marginBottom: 8, display: 'block' }}
          />
          <Button
            type="primary"
            onClick={confirm}
            size="small"
            style={{ width: 90, marginRight: 8 }}
          >
            搜索
          </Button>
          <Button onClick={clearFilters} size="small" style={{ width: 90 }}>
            重置
          </Button>
        </div>
      );
    },
  },
];

通过在输入框中输入内容并按Enter键或点击“搜索”按钮，用户可以过滤出包含该内容的数据。

多选功能

如果您希望用户能够选择多个筛选值，则可以在filterDropdown属性中配置多选框：

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => {
      return (
        <div>
          {options.map((option) => (
            <Checkbox
              key={option}
              checked={selectedKeys.includes(option)}
              onChange={(e) => {
                const newSelectedKeys = e.target.checked ? [...selectedKeys, option] : selectedKeys.filter((key) => key !== option);
                setSelectedKeys(newSelectedKeys);
              }}
            >
              {option}
            </Checkbox>
          ))}
          <Button
            type="primary"
            onClick={confirm}
            size="small"
            style={{ width: 90, marginRight: 8 }}
          >
            确认
          </Button>
          <Button onClick={clearFilters} size="small" style={{ width: 90 }}>
            重置
          </Button>
        </div>
      );
    },
  },
];

使用此配置，用户可以在多选框中选择多个值，从而过滤出符合这些值的条件。

按需过滤

默认情况下，表格会在用户选择筛选值后立即过滤数据。然而，有时您可能希望用户先选择值，然后在点击“确认”按钮后进行过滤。这可以通过配置onFilterDropdownVisibleChange事件处理程序来实现：

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => {
      return (
        <div>
          <Input
            value={selectedKeys[0]}
            onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={confirm}
            style={{ width: 188, marginBottom: 8, display: 'block' }}
          />
          <Button
            type="primary"
            onClick={confirm}
            size="small"
            style={{ width: 90, marginRight: 8 }}
          >
            搜索
          </Button>
          <Button onClick={clearFilters} size="small" style={{ width: 90 }}>
            重置
          </Button>
        </div>
      );
    },
    filterIcon: (filtered) => {
      return <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />;
    },
    onFilterDropdownVisibleChange: (visible) => {
      if (visible) {
        setTimeout(() => {
          setSelectedKeys([]);
        }, 500);
      }
    },
  },
];