如何通过点击周期选项动态显示/隐藏PrimeNG DataTable行？

针对PrimeNG DataTable实现点击周期过滤行的需求，推荐两种实用方案，适配不同场景：

方案一：直接维护过滤后的数据集（适合大数据量） #

这种方式通过修改绑定到表格的数据源实现过滤，性能更优，适合数千行数据的场景：

1. Component.ts 代码调整
   首先保存原始数据副本，避免过滤后丢失源数据，再添加选中周期变量和点击处理方法：

// 保存原始数据（初始化时赋值）
originalTableData: any[] = [...this.tableData];
selectedPeriod: string | null = null;

// 周期点击处理
onPeriodClick(period: string) {
  // 点击同一周期则取消过滤
  this.selectedPeriod = this.selectedPeriod === period ? null : period;

  if (this.selectedPeriod) {
    // 过滤出对应周期的数据
    this.tableData = this.originalTableData.filter(item => item.period === this.selectedPeriod);
  } else {
    // 恢复全部数据
    this.tableData = [...this.originalTableData];
  }
}

2. 模板代码调整
   给周期列表添加点击事件，表格保持原有绑定即可：

<!-- 周期列表 -->
<div class="period-selector">
  <div *ngFor="let period of ['A', 'B', 'C', 'D']" 
       (click)="onPeriodClick(period)"
       [class.active]="selectedPeriod === period">
    {{ period }}
  </div>
</div>

<!-- PrimeNG DataTable -->
<p-table [columns]="columns" [value]="tableData">
  <!-- 列定义（保持原有内容） -->
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">{{ col.header }}</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">{{ rowData[col.field] }}</td>
    </tr>
  </ng-template>
</p-table>

方案二：使用PrimeNG DataTable内置过滤功能 #

如果需要保留原始数据源，同时结合组件自身的过滤能力，可以用这种方式：

1. Component.ts 代码调整
   添加选中周期变量和点击处理方法，通过表格实例调用内置过滤：

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

// 表格实例引用
@ViewChild('dt') table!: Table;
selectedPeriod: string | null = null;

onPeriodClick(period: string) {
  this.selectedPeriod = this.selectedPeriod === period ? null : period;
  // 调用表格内置过滤，指定列名、匹配模式
  this.table.filter(this.selectedPeriod, 'period', 'equals');
}

2. 模板代码调整
   给表格添加模板引用，周期列表绑定点击事件：

<!-- 周期列表 -->
<div class="period-selector">
  <div *ngFor="let period of ['A', 'B', 'C', 'D']" 
       (click)="onPeriodClick(period)"
       [class.active]="selectedPeriod === period">
    {{ period }}
  </div>
</div>

<!-- PrimeNG DataTable 添加引用 -->
<p-table #dt [columns]="columns" [value]="tableData">
  <!-- 列定义（保持原有内容） -->
</p-table>

注意事项 #

• 方案一的优势是直接操作数组，大数据量下渲染性能更好；方案二更适合需要同时使用其他过滤条件（如全局搜索、列过滤）的场景。
• 可以给选中的周期添加active类，通过CSS高亮显示当前选中状态，提升用户体验。

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