如何为Ng-Zorro表格列的过滤器长选项列表添加搜索框功能

嘿，这个需求我刚好折腾过！Ng-Zorro默认的表格过滤器确实没带选项搜索功能，但咱们可以通过自定义过滤器模板来实现，步骤其实挺清晰的，我给你拆解一下：

核心思路 #

放弃使用默认的nzFilters属性，改用nzFilterDropdown自定义过滤器内容，在里面插入搜索框，实时过滤选项列表，最后手动处理筛选确认/重置的逻辑，和你原来的filter方法联动。

具体实现代码 #

1. 模板部分（HTML） #

把你原来的表头列替换成下面的代码，我们自定义过滤器的下拉内容：

<th scope="col" nz-th [nzFilterDropdown]="projectFilter">
  <span>Projects</span>
  <!-- 过滤器触发按钮，控制显示状态 -->
  <nz-filter-trigger 
    [nzActive]="showProjectFilter" 
    [nzDropdownMenu]="projectFilter"
  ></nz-filter-trigger>
</th>

<!-- 自定义过滤器模板 -->
<ng-template #projectFilter let-openChange>
  <div class="ant-table-filter-dropdown p-2">
    <!-- 搜索框 -->
    <input 
      nz-input 
      placeholder="Search projects" 
      [(ngModel)]="projectSearchKeyword" 
      (input)="filterProjectOptions()" 
      class="mb-3" 
    />
    <!-- 可滚动的选项列表 -->
    <nz-checkbox-group 
      [(ngModel)]="selectedProjects" 
      class="max-h-60 overflow-y-auto"
    >
      <nz-checkbox 
        *ngFor="let project of filteredProjectOptions" 
        [nzValue]="project.value"
      >
        {{ project.text }}
      </nz-checkbox>
    </nz-checkbox-group>
    <!-- 确认/重置按钮 -->
    <div class="ant-table-filter-dropdown-btns mt-3 flex justify-end gap-2">
      <button nz-button nzSize="small" (click)="onProjectFilterConfirm(openChange)">
        Confirm
      </button>
      <button nz-button nzSize="small" nzType="default" (click)="onProjectFilterReset(openChange)">
        Reset
      </button>
    </div>
  </div>
</ng-template>

2. 组件逻辑部分（TS） #

在你的组件类里添加以下变量和方法：

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

@Component({
  // 你的组件元数据
})
export class YourTableComponent implements OnInit {
  // 原始的项目过滤器选项（就是你原来的listOfProjects）
  listOfProjects: { text: string; value: string }[] = [
    { text: 'Project A', value: 'a' },
    { text: 'Project B', value: 'b' },
    // ...你的其他选项
  ];
  // 过滤后的选项列表
  filteredProjectOptions: { text: string; value: string }[] = [];
  // 搜索关键词
  projectSearchKeyword = '';
  // 当前选中的项目
  selectedProjects: string[] = [];
  // 标记过滤器是否处于激活状态（控制触发按钮的高亮）
  showProjectFilter = false;

  ngOnInit(): void {
    // 初始化时把原始列表赋值给过滤后列表
    this.filteredProjectOptions = [...this.listOfProjects];
  }

  // 根据搜索关键词过滤选项
  filterProjectOptions(): void {
    if (!this.projectSearchKeyword.trim()) {
      // 关键词为空时显示全部选项
      this.filteredProjectOptions = [...this.listOfProjects];
      return;
    }
    // 模糊匹配选项文本（不区分大小写）
    const keyword = this.projectSearchKeyword.toLowerCase();
    this.filteredProjectOptions = this.listOfProjects.filter(project => 
      project.text.toLowerCase().includes(keyword)
    );
  }

  // 确认筛选
  onProjectFilterConfirm(openChange: (open: boolean) => void): void {
    this.showProjectFilter = this.selectedProjects.length > 0;
    // 调用你原来的filter方法，传递选中的选项和类型
    this.filter(this.selectedProjects, 'projects');
    // 关闭过滤器下拉框
    openChange(false);
  }

  // 重置筛选
  onProjectFilterReset(openChange: (open: boolean) => void): void {
    this.projectSearchKeyword = '';
    this.selectedProjects = [];
    this.filterProjectOptions();
    // 调用filter方法清空筛选条件
    this.filter([], 'projects');
    this.showProjectFilter = false;
    openChange(false);
  }

  // 你原来的filter方法保持不变
  filter(selectedValues: string[], filterType: string): void {
    // 你的筛选逻辑...
  }
}

3. 样式优化（可选） #

如果需要调整过滤器的样式，比如选项列表的滚动高度，可以在组件的样式文件里加：

.max-h-60 {
  max-height: 15rem; /* 根据你的需求调整高度 */
}

关键说明 #

• 我们用nzFilterDropdown自定义了过滤器的全部内容，完全替代了默认的nzFilters行为
• 通过维护filteredProjectOptions数组，实时根据搜索关键词更新可选择的选项
• 手动处理确认和重置按钮的逻辑，确保和你原来的筛选流程无缝对接
• 用nz-filter-trigger控制过滤器的显示状态和触发按钮的高亮

这样就能实现带搜索框的过滤器啦，亲测好用！

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