Ant Design Table 筛选器如何限制最多同时选中1个选项

实现方案 #

场景1：单列筛选选项仅支持单选（即你举例的性别筛选场景，同个筛选器内最多选1项） #

Ant Design Table 原生提供了对应配置项，无需额外编写自定义逻辑，只需在对应列的配置中添加 filterMultiple: false 即可。该属性默认值为true（允许多选），设为false后筛选器会自动切换为单选模式，无法同时选中多个选项。
修改后的配置代码如下：

{
  title: 'Gender',
  dataIndex: 'gender',
  filters: [
    { text: 'Male', value: 'male' },
    { text: 'Female', value: 'female' },
  ],
  filterMultiple: false, // 新增这一行即可实现单选
  width: '20%',
}

场景2：整个Table所有列最多同时只有1个筛选条件处于激活状态 #

如果你需要的是跨列的筛选限制，即每次只能给任意一列设置筛选，不能同时给多列启用筛选，可通过监听Table的onChange事件手动控制筛选状态：

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

const YourComponent = () => {
  // 存储当前生效的筛选条件
  const [curFilters, setCurFilters] = useState({});

  const handleTableChange = (pagination, newFilters, sorter) => {
    // 找出所有已激活的筛选列
    const activeFilterKeys = Object.keys(newFilters).filter(key => newFilters[key]?.length);
    // 激活的筛选列超过1个时，仅保留最新触发的筛选，其余重置
    if (activeFilterKeys.length > 1) {
      const newActiveKey = activeFilterKeys.find(key => !curFilters[key]?.length);
      const limitedFilters = Object.fromEntries(
        Object.keys(newFilters).map(k => [k, k === newActiveKey ? newFilters[k] : []])
      );
      setCurFilters(limitedFilters);
      // 此处使用limitedFilters执行你的筛选逻辑
      return;
    }
    setCurFilters(newFilters);
    // 此处使用newFilters执行你的筛选逻辑
  }

  return <Table
    columns={你的列配置}
    dataSource={你的数据源}
    onChange={handleTableChange}
    filters={curFilters}
  />
}

内容的提问来源于stack exchange，提问作者Mateusz Piwowarski