Primeng 13.x带虚拟滚动的Tree组件子节点选中父节点未联动问题

问题原因 #

PrimeNG v13.4.1中，p-tree启用虚拟滚动（配置scrollHeight、virtualScroll、virtualNodeHeight）时，节点采用按需渲染机制（由cdk-virtual-scroll-viewport实现），仅视口内的节点会被渲染到DOM中。当子节点被选中/取消时，不在视口中的父节点无法触发内置的状态同步逻辑，导致父节点的半选状态无法更新，也不会呈现对应的样式。

解决方法 #

方法1：调用树组件内置的状态更新方法 #

利用p-tree提供的updateSelectionState()方法，在节点选中/取消事件中手动触发全量状态同步，强制更新所有节点的选中/半选状态：

1. 组件类中获取树的引用：

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

@Component({
  // 组件元数据
})
export class YourTreeComponent {
  @ViewChild('tree') tree: Tree;
  nodes: any[]; // 你的树节点数据

  onNodeSelect(event) {
    this.tree.updateSelectionState();
  }

  onNodeUnselect(event) {
    this.tree.updateSelectionState();
  }
}

2. 模板中绑定事件并配置虚拟滚动：

<p-tree #tree 
        [value]="nodes" 
        [checkbox]="true"
        [scrollHeight]="'400px'" 
        [virtualScroll]="true" 
        [virtualNodeHeight]="32"
        (onNodeSelect)="onNodeSelect($event)"
        (onNodeUnselect)="onNodeUnselect($event)">
</p-tree>

方法2：手动递归更新父节点状态 #

如果内置方法无效，可以自己实现递归逻辑，更新父节点的selected和partialSelected属性，确保状态正确同步：

updateParentStates(node: any) {
  if (!node.parent) return;

  const parent = node.parent;
  const selectedCount = parent.children.filter(child => child.selected).length;
  const totalCount = parent.children.length;

  if (selectedCount === totalCount) {
    parent.selected = true;
    parent.partialSelected = false;
  } else if (selectedCount > 0) {
    parent.selected = false;
    parent.partialSelected = true;
  } else {
    parent.selected = false;
    parent.partialSelected = false;
  }

  // 递归更新上层父节点
  this.updateParentStates(parent);
}

// 选中/取消节点时调用
onNodeSelect(event) {
  this.updateParentStates(event.node);
}

onNodeUnselect(event) {
  this.updateParentStates(event.node);
}

方法3：升级PrimeNG版本 #

该问题属于PrimeNG v13.4.1的已知兼容性bug，后续补丁版本（如v13.x系列的最新版）或更高主版本已修复此问题。可以考虑升级到对应版本，从根源解决问题。

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