使用单个日期过滤器同时筛选两个PrimeNG表格的实现问题

核心思路 #

用一个共享的过滤变量/过滤器对象，让两个表格绑定到同一个过滤源，同步触发过滤逻辑。

方案1：绑定共享过滤变量 + 自定义过滤函数 #

适合需要自定义过滤逻辑的场景，比如忽略时间部分、日期范围匹配等。

1. 组件中定义共享变量与过滤函数

import { Component, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';

@Component({
  selector: 'app-date-filter',
  templateUrl: './date-filter.component.html'
})
export class DateFilterComponent {
  // 共享的日期过滤值
  sharedDateFilter: Date | null = null;
  // 两个表格的数据源
  firstTableData = [...]; // 替换为你的第一组数据
  secondTableData = [...]; // 替换为你的第二组数据

  // 统一的日期过滤逻辑
  filterDate(value: any, filter: Date | null): boolean {
    if (!filter) return true;
    // 提取数据中的日期部分，忽略时间差异
    const itemDate = new Date(value.dateColumn);
    const filterDate = new Date(filter);
    return itemDate.toDateString() === filterDate.toDateString();
  }

  // 手动触发两个表格的过滤
  triggerFilter() {
    this.firstTable?.filter();
    this.secondTable?.filter();
  }

  // 获取表格实例
  @ViewChild('firstTable') firstTable!: Table;
  @ViewChild('secondTable') secondTable!: Table;
}

2. 模板中绑定共享过滤器

<!-- 单个日期选择器作为统一过滤器 -->
<p-calendar 
  [(ngModel)]="sharedDateFilter" 
  placeholder="选择日期"
  (onSelect)="triggerFilter()"
  dateFormat="yy-mm-dd"
></p-calendar>

<!-- 第一个表格 -->
<p-table #firstTable [value]="firstTableData">
  <ng-template pTemplate="header">
    <tr>
      <th>日期</th>
      <!-- 其他列表头 -->
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <tr>
      <td>{{ item.dateColumn | date:'yyyy-MM-dd' }}</td>
      <!-- 其他列内容 -->
    </tr>
  </ng-template>
  <ng-template pTemplate="filter" let-col>
    <!-- 无需单独列过滤器，使用统一的日期选择器 -->
  </ng-template>
</p-table>

<!-- 第二个表格 -->
<p-table #secondTable [value]="secondTableData">
  <ng-template pTemplate="header">
    <tr>
      <th>日期</th>
      <!-- 其他列表头 -->
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <tr>
      <td>{{ item.dateColumn | date:'yyyy-MM-dd' }}</td>
      <!-- 其他列内容 -->
    </tr>
  </ng-template>
  <ng-template pTemplate="filter" let-col>
    <!-- 无需单独列过滤器 -->
  </ng-template>
</p-table>

方案2：绑定共享过滤器对象（使用PrimeNG内置过滤） #

适合直接用PrimeNG内置过滤规则的场景，无需自定义函数。

1. 组件中定义共享过滤器对象

import { Component, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';

@Component({
  selector: 'app-date-filter',
  templateUrl: './date-filter.component.html'
})
export class DateFilterComponent {
  // 共享过滤器对象，键名需与表格日期列的field属性一致
  sharedFilters: any = {
    dateColumn: null
  };
  firstTableData = [...];
  secondTableData = [...];

  // 同步触发两个表格的过滤
  onDateChange() {
    this.firstTable.filter();
    this.secondTable.filter();
  }

  @ViewChild('firstTable') firstTable!: Table;
  @ViewChild('secondTable') secondTable!: Table;
}

2. 模板中绑定共享过滤器

<p-calendar 
  [(ngModel)]="sharedFilters.dateColumn" 
  placeholder="选择日期"
  (onSelect)="onDateChange()"
  dateFormat="yy-mm-dd"
></p-calendar>

<!-- 第一个表格，绑定共享过滤器 -->
<p-table 
  #firstTable 
  [value]="firstTableData" 
  [filters]="sharedFilters"
  filterMode="strict"
>
  <ng-template pTemplate="header">
    <tr>
      <th field="dateColumn">日期</th>
      <!-- 其他列 -->
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <tr>
      <td>{{ item.dateColumn | date:'yyyy-MM-dd' }}</td>
      <!-- 其他列 -->
    </tr>
  </ng-template>
</p-table>

<!-- 第二个表格，绑定同一个共享过滤器 -->
<p-table 
  #secondTable 
  [value]="secondTableData" 
  [filters]="sharedFilters"
  filterMode="strict"
>
  <ng-template pTemplate="header">
    <tr>
      <th field="dateColumn">日期</th>
      <!-- 其他列 -->
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <tr>
      <td>{{ item.dateColumn | date:'yyyy-MM-dd' }}</td>
      <!-- 其他列 -->
    </tr>
  </ng-template>
</p-table>

注意事项 #

• 如果两个表格的日期列字段名不同，需调整过滤逻辑：方案1中修改filterDate函数适配不同字段；方案2中维护两个字段的过滤值并同步更新。
• 若需要日期范围过滤，只需将sharedDateFilter改为包含开始/结束日期的对象，再调整过滤函数即可。
• 确保两个表格的filterMode一致，避免过滤结果不一致。

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