如何在滚动窗口中加载PrimeNG Tree并实现类多选控件功能？

嘿，我刚好实现过类似的需求——把PrimeNG Tree放进可弹出的滚动窗口，同时复刻Multiselect的标签展示功能。下面是一套完整的实现方案，你可以直接参考：

核心是用PrimeNG的OverlayPanel做弹出容器（和Multiselect的下拉层逻辑一致），内部嵌套Tree控件并开启滚动，再配合标签组件展示选中项，最后通过按钮触发弹窗。

1. 组件模板（HTML） #

<!-- 触发区域：按钮 + 选中标签展示 -->
<div class="flex items-center gap-2 p-2">
  <!-- 带箭头的触发按钮 -->
  <p-button 
    label="选择节点" 
    icon="pi pi-chevron-down" 
    (click)="treeOverlay.toggle($event)"
    [style]="{'min-width': '180px'}"
  ></p-button>
  
  <!-- 选中项标签（模拟Multiselect的标签样式） -->
  <p-chips 
    [(ngModel)]="selectedLabels" 
    (onRemove)="removeSelectedItem($event)"
    [disabled]="true"
    styleClass="flex-grow-1"
  ></p-chips>
</div>

<!-- 弹出的滚动窗口：内部放Tree控件 -->
<p-overlayPanel 
  #treeOverlay 
  [showCloseIcon]="true" 
  [style]="{'width': '380px', 'padding': '0'}"
>
  <!-- 带滚动的Tree控件 -->
  <p-tree 
    [value]="treeData" 
    [(selection)]="selectedNodes" 
    selectionMode="multiple"
    [style]="{'max-height': '320px', 'overflow-y': 'auto', 'border': 'none'}"
    (onNodeSelect)="syncSelectedLabels()"
    (onNodeUnselect)="syncSelectedLabels()"
  >
    <!-- 可选：添加树节点过滤功能 -->
    <ng-template pTemplate="header">
      <input 
        type="text" 
        pInputText 
        placeholder="搜索节点..." 
        (input)="filterTree($event)"
        class="w-full p-2"
      >
    </ng-template>
  </p-tree>
</p-overlayPanel>

2. 组件逻辑（TypeScript） #

import { Component, ViewChild } from '@angular/core';
import { TreeNode, OverlayPanel } from 'primeng/api';
import { Tree } from 'primeng/tree';

@Component({
  selector: 'app-tree-multiselect',
  templateUrl: './tree-multiselect.component.html',
  styleUrls: ['./tree-multiselect.component.css']
})
export class TreeMultiselectComponent {
  @ViewChild('tree') tree!: Tree;
  @ViewChild('treeOverlay') treeOverlay!: OverlayPanel;

  // 树节点数据示例
  treeData: TreeNode[] = [
    {
      label: '文档',
      children: [
        { label: '工作文档', children: [{ label: '报销单.docx' }, { label: '简历.pdf' }] },
        { label: '个人文档', children: [{ label: '旅行计划.txt' }] }
      ]
    },
    {
      label: '图片',
      children: [{ label: '日落.jpg' }, { label: '雪山.png' }]
    }
  ];

  selectedNodes: TreeNode[] = [];
  selectedLabels: string[] = [];

  // 同步选中节点和标签
  syncSelectedLabels() {
    this.selectedLabels = this.flattenNodeLabels(this.selectedNodes);
  }

  // 递归提取所有选中节点的标签（包括子节点）
  flattenNodeLabels(nodes: TreeNode[]): string[] {
    let labels: string[] = [];
    nodes.forEach(node => {
      labels.push(node.label!);
      if (node.children?.length) {
        labels = [...labels, ...this.flattenNodeLabels(node.children)];
      }
    });
    return labels;
  }

  // 移除标签时同步取消节点选中
  removeSelectedItem(event: { value: string }) {
    const removedLabel = event.value;
    this.selectedNodes = this.selectedNodes.filter(node => {
      const hasTargetLabel = (n: TreeNode) => n.label === removedLabel || (n.children?.some(c => hasTargetLabel(c)));
      return !hasTargetLabel(node);
    });
    this.syncSelectedLabels();
  }

  // 树节点过滤功能
  filterTree(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.tree.filter(filterValue);
  }
}

• 样式调整：可以给OverlayPanel添加阴影、圆角，让它更贴近Multiselect的视觉风格；
• 父子联动：如果需要父节点选中时自动选中所有子节点，给Tree添加[selectable]="true"属性即可；
• 全选功能：在Tree的header模板里添加全选/取消全选按钮，调用this.tree.toggleAll()方法实现；
• 自定义标签样式：如果不想用p-chips，可以自己写一个标签列表，用p-tag组件配合移除按钮实现。

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