如何在使用懒加载的PrimeNG p-table中实现客户端本地过滤

核心逻辑 #

当p-table的[lazy]属性设为true时，默认分页、排序、筛选操作都会触发onLazyLoad事件调用服务端接口。要实现本地筛选，核心是拦截筛选操作触发的懒加载事件，接管筛选逻辑，仅在分页、排序时调用接口。

实现步骤 #

1. 调整p-table模板配置 #

添加关键属性关闭默认筛选触发懒加载的逻辑，显式绑定自定义筛选事件：

<p-table 
  [value]="displayData" 
  [lazy]="true" 
  [totalRecords]="totalRecords"
  (onLazyLoad)="handleLazyLoad($event)"
  [customFilter]="true"
  [filterMode]="'local'"
  (onFilter)="handleLocalFilter($event)"
>
  <!-- 表格列、筛选器等内容保持原有配置即可 -->
</p>

关键参数说明：

• [customFilter]="true"：开启自定义筛选，阻止默认筛选行为触发懒加载事件
• [filterMode]="'local'"：指定筛选模式为本地
• (onFilter)：绑定自定义筛选事件，接管筛选逻辑

2. 声明对应状态变量 #

需要两组数据变量分离原始接口数据和筛选后展示数据：

// 接口返回的当前页原始未筛选数据
originalPageData: any[] = [];
// 给表格渲染的筛选后数据
displayData: any[] = [];
// 总数据量，服务端分页必填
totalRecords: number = 0;
// 存储当前激活的筛选条件
currentFilters: any = {};

3. 实现懒加载事件处理逻辑 #

仅当分页、排序操作触发懒加载时才调用服务端接口，筛选触发的懒加载事件直接拦截：

import { LazyLoadEvent, FilterUtils } from 'primeng/api';

// 懒加载事件处理
handleLazyLoad(event: LazyLoadEvent) {
  // 拦截筛选触发的懒加载事件，不调用接口
  const isFilterTrigger = JSON.stringify(event.filters) !== JSON.stringify(this.currentFilters);
  if (isFilterTrigger) return;

  // 仅分页、排序时调用服务端接口
  this.yourDataApi.getPageList(
    event.first, // 分页起始位置
    event.rows, // 每页条数
    event.sortField, // 排序字段
    event.sortOrder // 排序顺序
  ).subscribe(res => {
    this.originalPageData = res.list;
    this.totalRecords = res.total;
    // 拿到新分页数据后应用当前筛选条件
    this.applyLocalFilter();
  })
}

4. 实现本地筛选逻辑 #

// 筛选事件触发时更新当前筛选条件并执行筛选
handleLocalFilter(event: any) {
  this.currentFilters = event.filters;
  this.applyLocalFilter();
}

// 执行本地筛选
applyLocalFilter() {
  // 无筛选条件时直接展示原始当前页数据
  if (Object.keys(this.currentFilters).length === 0) {
    this.displayData = [...this.originalPageData];
    return;
  }
  // 可直接复用PrimeNG内置FilterUtils完成多条件匹配，也可自定义匹配规则
  this.displayData = FilterUtils.filter(this.originalPageData, this.currentFilters, 'loose');
}

注意事项 #

• 不要修改[lazy]属性为false，否则服务端分页功能会失效
• 每次分页、排序拿到新的当前页数据后，都要先更新originalPageData再执行筛选，避免筛选结果和当前分页数据不匹配
• 特殊格式的筛选（比如日期范围、枚举值精确匹配）可自定义applyLocalFilter里的匹配逻辑，不需要复用FilterUtils

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