我们在最新的项目中使用 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”,这对我来说更有意义。看起来完全无聊,或者也许我错过了什么?
我也一直在努力解决这个问题,但实际上 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)); });
在表格组件顶部注册
希望这对你有帮助