PrimeReact DataTable自定义filterFunction什么都不做

Question

我们在最新的项目中使用 PrimeReact，我们想要实现一个过滤器，其中列数据是一个数组，并且我们希望用户能够选择一个选项数组来过滤该列。 （因此该列代表分配的用户，过滤器将是要过滤的用户的多选）。

这需要 CUSTOM 的过滤模式，并且文档提到了列上的 filterFunction 属性，但除此之外绝对没有其他详细信息。我将模式设置为“自定义”并为其提供了过滤功能，但它确实……完全没有任何作用。当我将模式设置为自定义时，表格会自动过滤所有内容。

为了简单起见，现在我只是在字符串列上测试它。这是过滤器：

const [filters, setFilters] = useState({
    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
    name: { value: null, matchMode: FilterMatchMode.CUSTOM },
});

这是专栏：

<Column
    key="name"
    field="name"
    header="Name"
    sortable
    filter
    filterElement={searchFilterTemplate}
    filterFunction={() => console.log('test!')}
    showFilterMenu={false}
/>

注意：我在filterFunction中放入什么并不重要——什么也不会发生。另外，在node_modules中此方法的类型中，列上的filterFunction的返回类型为“void”，而我见过的每个示例都有一个返回类型“boolean”，这对我来说更有意义。看起来完全无聊，或者也许我错过了什么？

Answer 1

我也一直在努力解决这个问题，但实际上 FilterFunction 不起作用，你需要注册你的自定义函数

    import { FilterService } from "primereact/api"; 

 // use custom_[filterField] as example tags: { value: null, matchMode: FilterMatchMode.CUSTOM } 

FilterService.register('custom_tags', (value, filters) => {     if (!filters) return true;  if(!value) return false;    const array = value?.tags ?? value  return array.some((tagId) => filters?.includes(tagId)); });

import { FilterService } from "primereact/api";  /*use custom_[filterField] as example tags: { value: null, matchMode: >FilterMatchMode.CUSTOM }*/ 

FilterService.register('custom_tags', (value, filters) => {     if (!filters) return true;  if(!value) return false;    const array = value?.tags ?? value  return array.some((tagId) => filters?.includes(tagId)); });

在表格组件顶部注册

希望这对你有帮助