Ant Table列筛选：如何实现搜索匹配项全选且隐藏无关选项

核心思路 #

放弃默认的filterMode: true，改用自定义筛选面板，通过Select组件（开启搜索+多选）实现搜索仅展示匹配项，同时手动添加全选/取消全选逻辑，最后将筛选结果同步到Table的过滤状态中。

具体实现步骤 #

• 定义列配置时，指定自定义filterDropdown替换默认筛选面板
• 基于搜索关键词过滤选项列表，仅展示匹配项
• 实现全选/取消全选逻辑，同步选中值与Table过滤状态
• 通过onFilter和filteredValue维护表格的过滤生效状态

代码示例 #

import { Table, Select, Button, Checkbox } from 'antd';
import { useState, useMemo } from 'react';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, data }) => {
      // 提取所有唯一选项
      const allOptions = useMemo(() => Array.from(new Set(data.map(item => item.name))), [data]);
      // 根据搜索关键词过滤选项
      const filteredOptions = useMemo(() => {
        if (!selectedKeys[0]) return allOptions;
        return allOptions.filter(opt => opt.includes(selectedKeys[0]));
      }, [selectedKeys, allOptions]);

      const [isAllSelected, setIsAllSelected] = useState(false);

      // 全选/取消全选逻辑
      const handleAllSelect = (e) => {
        const checked = e.target.checked;
        setIsAllSelected(checked);
        setSelectedKeys(checked ? filteredOptions : []);
      };

      return (
        <div style={{ padding: 8 }}>
          <Select
            mode="multiple"
            showSearch
            placeholder="搜索姓名"
            value={selectedKeys}
            onChange={(value) => {
              setSelectedKeys(value);
              // 同步全选框状态：选中所有匹配项时自动勾选全选
              setIsAllSelected(value.length === filteredOptions.length && filteredOptions.length > 0);
            }}
            onSearch={(value) => setSelectedKeys(value ? [value] : [])}
            style={{ width: '100%', marginBottom: 8 }}
            optionFilterProp="children"
          >
            {filteredOptions.map(opt => (
              <Select.Option key={opt} value={opt}>{opt}</Select.Option>
            ))}
          </Select>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Checkbox checked={isAllSelected} onChange={handleAllSelect}>全选</Checkbox>
            <div>
              <Button type="primary" size="small" onClick={confirm} style={{ marginRight: 8 }}>确定</Button>
              <Button size="small" onClick={clearFilters}>重置</Button>
            </div>
          </div>
        </div>
      );
    },
    onFilter: (value, record) => value.includes(record.name),
    filteredValue: [],
  },
  // 其他列配置...
];

// 示例数据源
const data = [
  { key: '1', name: '张三', age: 28 },
  { key: '2', name: '李四', age: 32 },
  { key: '3', name: '张三丰', age: 100 },
  { key: '4', name: '张无忌', age: 25 },
  { key: '5', name: '王五', age: 40 },
];

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

export default CustomFilterTable;

关键说明 #

• 自定义筛选面板完全接管了筛选UI，使用Select的showSearch特性实现搜索仅展示匹配项，避免了默认filterMode显示全部选项的问题
• 全选逻辑基于当前搜索后的匹配选项集合，确保全选仅针对搜索结果生效
• 通过setSelectedKeys、confirm等API与Table的过滤状态联动，保证筛选结果正确应用到表格数据

内容的提问来源于stack exchange，提问作者Ranjan Kumar