如何在AG-Grid中实现支持空格分隔多值匹配的列筛选功能？

有和UI Grid用法接近的极简实现方案，无需开发完整自定义筛选组件，仅需在列定义中配置内置文本过滤器的自定义匹配逻辑即可，代码量和原有实现基本一致。

配置示例 #

直接在对应列的columnDefs中添加如下配置即可：

const targetColumn = {
  field: '你的列字段名',
  // 沿用AG Grid内置文本过滤器，无需自定义筛选UI
  filter: 'agTextColumnFilter',
  filterParams: {
    // 自定义匹配逻辑，等价于UI Grid的filter.condition配置
    textMatcher: ({ filterValue, value }) => {
      // 将用户输入的空格分隔内容转为有效值数组
      const matchValues = filterValue.trim().split(/\s+/).filter(Boolean)
      // 输入为空时返回所有行
      if (!matchValues.length) return true
      // 匹配单元格值是否在目标列表中
      return matchValues.includes(String(value))
    }
  }
}

适配说明 #

• 该配置在Vue技术栈下无需额外兼容，直接写入列定义数组即可生效，和CentOS 7运行环境无关联
• 保留AG Grid默认的筛选输入框交互，用户直接输入空格分隔的多值即可触发匹配
• 若需要支持大小写不敏感匹配，只需在匹配前分别对filterValue和value调用.toLowerCase()处理即可
• 数字类型的列值已通过String(value)做类型转换，和输入的字符串格式自动对齐

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