如何使用 filterDropdown 过滤 antd 表？答案

【问题标题】：How to filter antd table w/o using filterDropdown?如何使用 filterDropdown 过滤 antd 表？
【发布时间】：2025-11-25 18:25:01
【问题描述】：

我整天都在想办法过滤 antd 表。我的设计是在标题中有一个可见的过滤器：

enter image description here

我不希望出现所有示例中的弹出窗口。所以问题是，是否可以只设置过滤器属性？

我采用了标准示例，仅将地址设为可过滤

https://codepen.io/jabberwo/pen/OJJyzLg?editors=0011

但是当我删除 filterDropdown （关于函数输入参数是什么的文档在哪里？！），而是将 filterValue 设置为由输入的 onChange 更新的状态的文本，如

https://codepen.io/jabberwo/pen/XWWmVKL?editors=0011

我在 antd/es/table/Table.js 的第 975 行遇到了一个非常奇怪的错误

Uncaught TypeError: values.some is not a function
    at VM1051 vendors~main.3a264a9707764ceadc39.bundle.js:53640
    at Array.filter (<anonymous>)

这是因为我设置了 filtersValue 和 onFilter 而引发的。如果我不设置其中之一，我不会得到错误——但我也没有得到任何过滤。从文档来看，这看起来像是我应该做的。即使是一个简单的

onFilter: () => true

会抛出，所以不是过滤代码，而是这个神秘的 values.some 应该被定义。

谢谢，刺拳

【问题讨论】：

标签： reactjs filter antd

【解决方案1】：

天哪，浪费了 3-4 个小时，没有意识到 filterValue 必须是一个字符串数组！

filteredValue: [this.state.alertFilter.toLowerCase()],
onFilter: (value, record) =>
           record.alertName
              .toString()
              .toLowerCase()
              .includes(this.state.alertFilter.toLowerCase()),

是的，文档确实这么说，只是没有点击，没有看到它或类似的东西。

在这里为下一个使用谷歌寻求帮助的开发者提供答案......

【讨论】：