React中如何为Antd Table的filters筛选项配置多个匹配值

该需求完全可以实现，核心调整filters配置的value字段格式与onFilter匹配逻辑即可，具体操作如下：

修改思路 #

• 将需要多值匹配的筛选项value从拼接字符串改为数组类型，存放所有需要匹配的目标值
• 改写onFilter逻辑，针对数组类型的筛选值，校验字段值是否命中数组内任意一项

修改后完整配置代码 #

{
  title: 'Provider',
  dataIndex: 'provider',
  key: 'provider',
  width: 120,
  filters: [
    { text: 'Firebase', value: 'Firebase' },
    // 单个选项对应多个匹配值，用数组存储
    { text: 'Facebook', value: ['facebook.com', 'faceBook'] },
    { text: 'Google', value: 'Google' },
    { text: 'Password', value: 'password' },
  ],
  onFilter: (filterVal, record) => {
    // 数组类型筛选值走多值匹配逻辑
    if (Array.isArray(filterVal)) {
      // 若需要忽略大小写匹配，可将两边统一转小写后判断：
      // return filterVal.some(val => val.toLowerCase() === record.provider?.toLowerCase())
      return filterVal.includes(record.provider)
    }
    // 单值场景走原有匹配逻辑
    return record.provider.includes(filterVal)
  },
  ellipsis: true,
}

效果参考 #

额外说明 #

如果你的record.provider字段本身也是多值数组，只需将匹配逻辑调整为两个数组取交集，判断是否存在公共值即可。

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