Ant Design Table的filterDropdownProps配置无效问题求助

在 React 18.2.0 + AntD 5.22.0 环境下，配置 Table Column 的 filterDropdownProps 想要实现选中过滤选项直接应用过滤（无需点击确定按钮）但无效的问题，可通过以下两种方案解决：

方案一：自定义 filterDropdown（推荐，逻辑更可控） #

直接替换默认的过滤下拉组件，用 Select 实现选中即触发过滤逻辑：

const columns: ColumnsType<TagCombinationPublic> = [
  {
    title: "Cluster",
    dataIndex: ["cluster", "tag"],
    key: "cluster",
    filters: clusters?.data.map((tag) => ({
      text: tag.tag,
      value: tag.tag,
    })),
    onFilter: (value, record) => record.cluster.tag === value as string,
    filterMultiple: false,
    filterSearch: true,
    filteredValue: filter.cluster ? [filter.cluster] : null,
    sorter: (a, b) => a.cluster.tag.localeCompare(b.cluster.tag),
    sortOrder: sortedInfo.columnKey === "cluster" ? sortedInfo.order : null,
    // 自定义过滤下拉组件
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => {
      return (
        <Select
          style={{ width: 200, margin: 8 }}
          value={selectedKeys[0]}
          onChange={(value) => {
            setSelectedKeys(value ? [value] : []);
            // 选中后立即确认过滤并关闭下拉
            confirm({ closeDropdown: true });
          }}
          allowClear
          showSearch
          placeholder="搜索Cluster"
          optionFilterProp="children"
          options={clusters?.data.map(tag => ({
            label: tag.tag,
            value: tag.tag,
          }))}
        />
      );
    },
  },
  // ...其他列配置
];

说明 #

通过 filterDropdown 自定义下拉组件后，利用 Select 的 onChange 事件，选中值时直接调用 AntD 提供的 confirm 函数，触发 Table 的过滤逻辑，同时关闭下拉菜单，完全跳过默认的"确定"按钮步骤，逻辑清晰且可控。

方案二：调整 filterDropdownProps 配置（适配原生菜单） #

如果想保留 AntD 默认的过滤菜单样式，可通过修改 filterDropdownProps 的事件绑定实现：

const columns: ColumnsType<TagCombinationPublic> = [
  {
    // ...其他原有配置
    filterDropdownProps: {
      menu: {
        onClick: ({ key }) => {
          // 直接更新过滤状态
          setFilter({ ...filter, cluster: key });
        },
        // 同步菜单选中状态，保证视觉一致
        selectedKeys: filter.cluster ? [filter.cluster] : [],
      },
    },
    filteredValue: filter.cluster ? [filter.cluster] : null,
  },
  // ...其他列配置
];

说明 #

原配置中使用的 menu.onSelect 可能被 AntD 内部逻辑拦截，改用 menu.onClick 直接更新过滤状态，同时确保 filteredValue 与状态同步，Table 会根据 filteredValue 自动应用过滤规则。

注意事项 #

• 无论哪种方案，都要保证 filteredValue 始终与你的过滤状态（示例中的 filter.cluster）保持一致，这是 Table 识别过滤条件并渲染结果的核心依据。
• AntD 5 的 Table 过滤逻辑与 v4 版本存在差异，不要直接照搬旧版本的配置写法。

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