react-bootstrap-table2下拉筛选实现LIKE模糊匹配技术问询

我来帮你搞定这个模糊匹配的需求！react-bootstrap-table2的textFilter默认是精确匹配，但我们可以通过自定义onFilter函数来实现你要的LIKE模糊效果，具体步骤如下：

1. 自定义筛选逻辑函数 #

在你的列定义中，给textFilter添加onFilter配置项，这个函数会接收筛选值和当前单元格的原始数据，我们在这里实现模糊匹配的判断：

columns = [{
  dataField: 'project',
  text: 'Project',
  filter: textFilter({
    options: fpsoOptions,
    getFilter(filter){ projectFilter = filter; },
    style: { display: 'none' },
    // 核心：自定义模糊匹配逻辑
    onFilter: (filterValue, cellValue) => {
      // 如果筛选值为空，直接返回所有数据
      if (!filterValue) return true;
      // 实现忽略大小写的模糊匹配（可选：去掉toLowerCase()则区分大小写）
      const lowerFilter = filterValue.toLowerCase();
      const lowerCell = cellValue.toLowerCase();
      // 判断原始单元格数据是否包含筛选值
      return lowerCell.includes(lowerFilter);
    }
  }),
  sort: true,
  formatter: this.projectFormatter,
  headerStyle: (col, idx) => { return smHeaderStyle; },
}, /* 其他列 */]

2. 针对你的数据结构优化（可选） #

如果你的需求是仅匹配fpsos部分（即@分隔的内容），而不是整个单元格字符串，可以调整onFilter的逻辑，精准匹配格式化前的目标片段：

onFilter: (filterValue, cellValue) => {
  if (!filterValue) return true;
  const lowerFilter = filterValue.toLowerCase();
  // 解析原始数据中的fpsos部分
  const fpsos = cellValue.split('|')[0].split('@');
  // 检查是否有任意一个fpso包含筛选值
  return fpsos.some(pu => pu.toLowerCase().includes(lowerFilter));
}

3. 保持原有触发逻辑不变 #

你已经实现的onChangeFilter函数不需要修改，它会正常触发筛选器，而筛选逻辑会自动使用我们自定义的onFilter：

const onChangeFilter = (e) => { projectFilter(e.target.value) }

原理说明 #

• react-bootstrap-table2的筛选器会在每次触发筛选时，遍历所有行数据，调用onFilter函数判断当前行是否符合条件
• 我们的onFilter直接基于原始的单元格数据（未经过projectFormatter格式化的字符串）进行判断，避免了处理DOM元素的麻烦
• includes()方法就实现了SQL中LIKE '%xxx%'的模糊匹配效果，加上toLowerCase()可以实现不区分大小写的筛选

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