当然可以实现这个需求！Antd Table的筛选菜单支持完全自定义，我们只需要利用filterDropdown属性打造带「全选」按钮的筛选面板，同时针对性处理两种全选逻辑即可。下面是具体的实现方案：

核心思路 #

1. 自定义筛选面板：替换Antd默认的筛选菜单，加入搜索框（可选）、全选按钮和选项列表
2. 状态管理：维护选中项、搜索关键词、原始选项列表三个状态
3. 全选逻辑判断：
   • 当filterSearch为false，或者开启了filterSearch但用户未输入搜索内容时，全选所有原始选项
   • 当filterSearch为true且用户输入了搜索内容时，全选经过筛选后的选项

完整代码示例 #

import React, { useState } from 'react';
import { Table, Checkbox, Input, Button, Space } from 'antd';
import type { ColumnType, Key } from 'antd/es/table';

// 模拟表格数据
interface TableDataType {
  key: Key;
  name: string;
  category: string;
}

const data: TableDataType[] = [
  { key: '1', name: '商品A', category: '电子产品' },
  { key: '2', name: '商品B', category: '电子产品' },
  { key: '3', name: '商品C', category: '家居用品' },
  { key: '4', name: '商品D', category: '家居用品' },
  { key: '5', name: '商品E', category: '服饰' },
];

// 所有筛选选项
const allCategoryOptions = [
  { label: '电子产品', value: '电子产品' },
  { label: '家居用品', value: '家居用品' },
  { label: '服饰', value: '服饰' },
];

const CustomFilterTable: React.FC = () => {
  // 控制选中的筛选项
  const [selectedKeys, setSelectedKeys] = useState<Key[]>([]);
  // 搜索框输入值
  const [searchValue, setSearchValue] = useState('');
  // 是否开启筛选搜索（对应需求中的filterSearch配置）
  const filterSearch = true;

  // 根据搜索值过滤选项
  const filteredOptions = allCategoryOptions.filter(option =>
    option.label.includes(searchValue)
  );

  // 处理全选逻辑
  const handleSelectAll = () => {
    // 判断当前是否需要全选所有原始选项
    const shouldSelectAllOriginal = !filterSearch || searchValue === '';
    const targetKeys = shouldSelectAllOriginal
      ? allCategoryOptions.map(opt => opt.value)
      : filteredOptions.map(opt => opt.value);
    setSelectedKeys(targetKeys);
  };

  // 自定义筛选面板
  const categoryFilterDropdown = () => (
    <div style={{ padding: 8, width: 240 }}>
      {/* 仅当filterSearch为true时显示搜索框 */}
      {filterSearch && (
        <Input
          placeholder="搜索类别"
          value={searchValue}
          onChange={(e) => setSearchValue(e.target.value)}
          style={{ marginBottom: 12, width: '100%' }}
        />
      )}
      <Button
        type="primary"
        size="small"
        onClick={handleSelectAll}
        style={{ marginBottom: 12, width: '100%' }}
      >
        全选
      </Button>
      {/* 筛选选项列表 */}
      <Checkbox.Group
        value={selectedKeys}
        onChange={setSelectedKeys}
        style={{ maxHeight: 220, overflowY: 'auto', display: 'block' }}
      >
        {filteredOptions.map(option => (
          <Checkbox key={option.value} value={option.value} style={{ display: 'block', margin: '4px 0' }}>
            {option.label}
          </Checkbox>
        ))}
      </Checkbox.Group>
      {/* 确认/重置按钮 */}
      <Space style={{ marginTop: 12, width: '100%', justifyContent: 'flex-end' }}>
        <Button size="small" onClick={() => {
          // 这里可以触发表格筛选的确认逻辑，比如调用Table的onFilter事件
          // 如果需要实时筛选，这一步可以省略，因为Checkbox.Group的onChange已经更新了selectedKeys
        }}>
          确认
        </Button>
        <Button size="small" onClick={() => {
          setSelectedKeys([]);
          setSearchValue('');
        }}>
          重置
        </Button>
      </Space>
    </div>
  );

  // 表格列配置
  const columns: ColumnType<TableDataType>[] = [
    {
      title: '商品名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '商品类别',
      dataIndex: 'category',
      key: 'category',
      // 绑定自定义筛选面板
      filterDropdown: categoryFilterDropdown,
      // 绑定选中的筛选项
      filterSelectedKeys: selectedKeys,
      // 筛选逻辑：如果没有选中项则显示所有，否则只显示匹配选中类别的数据
      onFilter: (value, record) => selectedKeys.length === 0 || selectedKeys.includes(record.category),
      render: (text) => <span>{text}</span>,
    },
  ];

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

export default CustomFilterTable;

关键逻辑说明 #

1. 全选判断：在handleSelectAll函数中，通过!filterSearch || searchValue === ''判断是否需要全选所有原始选项，否则只选过滤后的选项
2. 筛选联动：搜索框输入变化时，实时过滤选项列表，确保全选按钮只对当前可见的选项生效
3. 自定义面板：通过filterDropdown注入自定义的筛选组件，完全控制UI和交互逻辑

这个方案完全贴合你的需求，而且可以根据实际场景调整filterSearch的开关，灵活适配不同的筛选场景。

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