有没有和官方演示一致的PrimeNG Table（p-table）列筛选可用示例？

前置校验 #

• 确保项目安装的primeng、@angular/cdk版本匹配，推荐使用16.2.0以上稳定版本
• 全局样式文件必须正确引入PrimeNG核心样式、主题样式，这是解决样式异常、弹窗偏移的核心原因：

/* angular.json 或者全局styles.css中添加 */
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";
@import "primeicons/primeicons.css";

模块导入（app.module.ts 或对应独立组件导入） #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TableModule } from 'primeng/table';
import { MultiSelectModule } from 'primeng/multiselect';
import { InputTextModule } from 'primeng/inputtext';
import { DropdownModule } from 'primeng/dropdown';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    TableModule,
    MultiSelectModule,
    InputTextModule,
    DropdownModule
  ]
})
export class AppModule { }

组件模板代码（xxx.component.html） #

<p-table 
  [value]="products" 
  [paginator]="true" 
  [rows]="10"
  [rowsPerPageOptions]="[5,10,20]"
  [globalFilterFields]="['name','category','price','status']"
  #dt
>
  <!-- 表头自定义筛选、排序区域 -->
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="name">
        商品名称
        <p-sortIcon field="name"></p-sortIcon>
        <p-multiSelect 
          [options]="nameOptions" 
          placeholder="筛选名称" 
          (onChange)="dt.filter($event.value, 'name', 'in')"
          [style]="{width: '100%', 'margin-top': '8px'}"
          [appendTo]="'body'"
        ></p-multiSelect>
      </th>
      <th pSortableColumn="category">
        分类
        <p-sortIcon field="category"></p-sortIcon>
        <p-multiSelect 
          [options]="categoryOptions" 
          placeholder="筛选分类" 
          (onChange)="dt.filter($event.value, 'category', 'in')"
          [style]="{width: '100%', 'margin-top': '8px'}"
          [appendTo]="'body'"
        ></p-multiSelect>
      </th>
      <th pSortableColumn="price">
        价格
        <p-sortIcon field="price"></p-sortIcon>
        <input 
          pInputText 
          type="number" 
          placeholder="最小价格" 
          (input)="dt.filter($event.target.value, 'price', 'gte')"
          [style]="{width: '100%', 'margin-top': '8px'}"
        >
      </th>
      <th pSortableColumn="status">
        状态
        <p-sortIcon field="status"></p-sortIcon>
        <p-multiSelect 
          [options]="statusOptions" 
          placeholder="筛选状态" 
          (onChange)="dt.filter($event.value, 'status', 'in')"
          [style]="{width: '100%', 'margin-top': '8px'}"
          [appendTo]="'body'"
        ></p-multiSelect>
      </th>
    </tr>
  </ng-template>
  <!-- 表格内容 -->
  <ng-template pTemplate="body" let-product>
    <tr>
      <td>{{product.name}}</td>
      <td>{{product.category}}</td>
      <td>¥{{product.price}}</td>
      <td>{{product.status}}</td>
    </tr>
  </ng-template>
</p-table>

组件逻辑代码（xxx.component.ts） #

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

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

@Component({
  selector: 'app-product-table',
  templateUrl: './product-table.component.html'
})
export class ProductTableComponent implements OnInit {
  products: Product[] = [];
  nameOptions: any[] = [];
  categoryOptions: any[] = [
    {label: '电子产品', value: 'electronics'},
    {label: '服装', value: 'clothing'},
    {label: '家居', value: 'home'}
  ];
  statusOptions: any[] = [
    {label: '在售', value: 'active'},
    {label: '下架', value: 'inactive'},
    {label: '缺货', value: 'out_of_stock'}
  ];

  ngOnInit() {
    // 模拟测试数据，可替换为后端接口返回数据
    this.products = [
      {name: '手机', category: 'electronics', price: 5999, status: 'active'},
      {name: '笔记本电脑', category: 'electronics', price: 8999, status: 'active'},
      {name: 'T恤', category: 'clothing', price: 99, status: 'active'},
      {name: '牛仔裤', category: 'clothing', price: 199, status: 'out_of_stock'},
      {name: '沙发', category: 'home', price: 3999, status: 'inactive'},
      {name: '茶几', category: 'home', price: 1299, status: 'active'}
    ];
    // 自动生成名称筛选项，动态数据可在接口返回后生成
    this.nameOptions = this.products.map(item => ({label: item.name, value: item.name}));
  }
}

核心修复点说明 #

• 所有下拉组件添加[appendTo]="'body'"属性，直接解决弹窗位置偏移、被父容器裁剪的问题
• 确保主题样式正确引入，解决官方示例缺失样式导致的显示异常问题
• 每列自带pSortableColumn绑定对应字段，原生支持正序、倒序切换
• 多选择筛选绑定(onChange)直接触发表格对应字段的in匹配筛选，无需额外自定义过滤逻辑

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