PrimeNg TreeTable GlobalFilter首列匹配后跳过后续列检索问题
根因说明
这是PrimeNg TreeTable 15.1.0之前版本的已知缺陷:全局过滤逻辑遍历globalFilterFields配置的字段时存在短路问题,前序字段未匹配命中时,不会继续校验后续字段是否符合过滤条件,导致只有首列的name字段参与过滤。
修复方案
方案一:自定义过滤逻辑(全版本兼容,推荐)
不需要修改原有模板配置,只需要替换搜索框的触发逻辑,手动实现多字段匹配:
- 修改输入框的input事件绑定:
<input #searchBox type="text" [(ngModel)]="searchText" pInputText class="searchBox" placeholder="Search" (input)="customFilter($event.target.value, tt)" />
- 组件内新增自定义过滤方法:
import { TreeTable } from 'primeng/treetable'; // ...其他组件代码 customFilter(keyword: string, treeTable: TreeTable) { const trimKeyword = keyword?.trim().toLowerCase(); if (!trimKeyword) { treeTable.filterGlobal('', 'contains'); return; } treeTable.filterGlobal(keyword, 'contains', (rowValue, filterVal) => { // 手动校验所有配置的过滤字段 return ['name', 'marketingName', 'm_id'].some(field => { const fieldValue = rowValue[field]?.toString().toLowerCase() || ''; return fieldValue.includes(trimKeyword); }); }); }
方案二:升级PrimeNg版本
将PrimeNg依赖升级到15.1.0及以上版本,官方已在该版本修复了全局过滤字段遍历短路的问题,原有globalFilterFields配置无需修改即可正常生效。
修改完成后重新测试,搜索Model即可返回3条符合预期的结果。
内容的提问来源于stack exchange,提问作者Vaibhav Sawant
相关产品推荐
相关产品推荐

