在Angular PrimeNG中，可以使用TreeTable组件来创建树形结构，同时还提供了一个过滤器用于对树形数据进行筛选。

首先，在组件中导入TreeTable组件和TreeNode接口：

import { TreeNode } from 'primeng/api';
import { TreeTable } from 'primeng/treetable';

然后在组件中定义树形结构的数据和过滤器变量：

data: TreeNode[]; // 定义树形结构的数据
filteredData: TreeNode[]; // 定义过滤器后的数据
filterText: string; // 定义过滤器的文本变量

接下来，在组件中初始化数据和过滤器变量：

ngOnInit() {
  // 初始化数据
  this.data = [
    {
      label: 'Node 1',
      data: {name: 'Node 1', description: 'Node 1 Description'},
      children: [
        {
          label: 'Node 1.1',
          data: {name: 'Node 1.1', description: 'Node 1.1 Description'}
        },
        {
          label: 'Node 1.2',
          data: {name: 'Node 1.2', description: 'Node 1.2 Description'},
          children: [
            {
              label: 'Node 1.2.1',
              data: {name: 'Node 1.2.1', description: 'Node 1.2.1 Description'}
            }
          ]
        }
      ]
    },
    {
      label: 'Node 2',
      data: {name: 'Node 2', description: 'Node 2 Description'}
    }
  ];

  // 初始化过滤器变量
  this.filteredData = this.data;
  this.filterText = '';
}

然后在TreeTable组件中添加过滤器：

  
    
      
        
      
      
        Name
      
      
        Description
      
    
  
  
    
      
        {{rowData.label}}
      
      
        {{rowData.data.name}}
      
      
        {{rowData.data.description}}
      
    
  

以上代码中的[filter]="filterText"表示使用过滤器变量filterText进行过滤。因为要在客户端进行过滤，所以还要设置filterMode="client"参数。同时在ng-template中设置头部的搜索框和数据的展示方式。在组件中还要编写过滤器函数：

onFilterChange() {
  this.filteredData = this.filterByLabel(this.data, this.filterText);
}

filterByLabel(data: TreeNode[], filterText: string): TreeNode[] {
  if (!filterText) {
    return data;
  }

  return data.filter(node => {
    return node.label.toLowerCase().includes(filterText.toLowerCase()) ||
      (node.children && node.children.length > 0 && this.filterByLabel(node.children, filterText).length > 0);
  });
}

以上代码中的onFilterChange()函数用于监听过滤器变量的改变，并调用filterByLabel()函数对数据进行过滤。filterByLabel()函数是一个递归函数，用于对树形数据进行过滤，它首先判断当前节点的label是否包含了过滤器文本，如果包含，则返回当前节点，否则递归调用filterByLabel()函数对子节点进行过滤，如果子节点中有一个符合条件，则返回当前节点，否则返回空数组。

最后在组件中加入过滤器文本变量的监听：

ngOnChanges(changes: SimpleChanges) {
  if (changes.filterText) {
    this.onFilterChange();
  }
}

以上代码中的ngOnChanges()函数用于监听过滤器文本变量的改变，并调用onFilterChange()函数进行重新过滤。

完成以上步骤后，在应用中使用该组件即可实现树形过滤器。 免责声明：本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。