如何在PrimeNG表格表头添加下拉框并实现筛选展示功能

1. 准备组件数据与基础逻辑 #

先在组件里定义数据源、过滤后的数据集合、下拉选项，以及筛选方法：

import { Component } from '@angular/core';

interface Product {
  id: number;
  name: string;
  category: string;
  price: number;
}

@Component({
  selector: 'app-table-filter',
  templateUrl: './table-filter.component.html'
})
export class TableFilterComponent {
  // 原始数据源，不要直接修改
  originalProducts: Product[] = [
    { id: 1, name: 'Laptop', category: 'Electronics', price: 999 },
    { id: 2, name: 'Phone', category: 'Electronics', price: 699 },
    { id: 3, name: 'Shirt', category: 'Clothing', price: 29 },
    { id: 4, name: 'Shoes', category: 'Clothing', price: 79 }
  ];
  // 用于表格展示的过滤后数据
  filteredProducts: Product[] = [...this.originalProducts];
  // 下拉框选项：从原始数据提取唯一分类
  categoryOptions: string[] = Array.from(new Set(this.originalProducts.map(p => p.category)));
  // 当前选中的筛选值
  selectedCategory: string = '';

  // 执行筛选逻辑
  filterByCategory() {
    if (!this.selectedCategory) {
      this.filteredProducts = [...this.originalProducts];
      return;
    }
    // 严格匹配分类
    this.filteredProducts = this.originalProducts.filter(product => product.category === this.selectedCategory);
  }
}

2. 在表头嵌入下拉框 #

在模板中，针对需要筛选的列，把表头单元格替换成包含p-dropdown的内容，绑定选项、选中值和变更事件：

<p-table [value]="filteredProducts" responsiveLayout="scroll">
  <ng-template pTemplate="header">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>
        Category
        <!-- 表头内的筛选下拉框 -->
        <p-dropdown 
          [options]="categoryOptions" 
          [(ngModel)]="selectedCategory" 
          placeholder="Filter" 
          (onChange)="filterByCategory()"
          [style]="{'width': '120px', 'margin-left': '10px'}"
        ></p-dropdown>
      </th>
      <th>Price</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
    <tr>
      <td>{{product.id}}</td>
      <td>{{product.name}}</td>
      <td>{{product.category}}</td>
      <td>{{product.price | currency}}</td>
    </tr>
  </ng-template>
</p-table>

3. 可选优化与扩展 #

支持模糊筛选 #

如果不需要严格匹配，修改筛选方法为模糊匹配：

filterByCategory() {
  if (!this.selectedCategory) {
    this.filteredProducts = [...this.originalProducts];
    return;
  }
  this.filteredProducts = this.originalProducts.filter(product => 
    product.category.toLowerCase().includes(this.selectedCategory.toLowerCase())
  );
}

添加"全部"选项 #

给下拉框加一个清空筛选的选项：

// 修改选项数组，添加"All"
categoryOptions: string[] = ['All', ...Array.from(new Set(this.originalProducts.map(p => p.category)))];

// 更新筛选方法
filterByCategory() {
  if (!this.selectedCategory || this.selectedCategory === 'All') {
    this.filteredProducts = [...this.originalProducts];
    return;
  }
  this.filteredProducts = this.originalProducts.filter(product => product.category === this.selectedCategory);
}

利用PrimeNG内置表格过滤 #

大数据量场景下，用PrimeNG表格内置的过滤方法更高效：

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

// 组件内添加表格实例引用
@ViewChild('dt') table!: Table;

// 修改筛选方法
filterByCategory() {
  this.table.filter(this.selectedCategory, 'category', 'equals');
}

模板中给表格加标识：

<p-table #dt [value]="originalProducts" responsiveLayout="scroll">
  <!-- 表头和内容部分不变 -->
</p-table>

必做配置 #

确保在你的Angular模块中导入PrimeNG的对应模块：

import { DropdownModule } from 'primeng/dropdown';
import { TableModule } from 'primeng/table';

@NgModule({
  imports: [
    // 其他模块
    DropdownModule,
    TableModule
  ]
})
export class YourFeatureModule { }

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