如何配置PrimeNG树仅允许选择叶子节点？

方法一：通过事件拦截取消非叶子节点选择 #

1. 确保你的树节点数据treeItems中，叶子节点带有leaf: true属性（如果没有，可在数据处理阶段给无children的节点自动添加该属性）。
2. 修改onNodeSelect方法，判断选中节点是否为叶子，若非叶子则清空选中状态：

   nodeSelect(event: TreeNodeSelectEvent) {
     // 若选中的不是叶子节点，取消选择
     if (!event.node.leaf) {
       this.selectedIndicator = null;
       // 可选：添加用户提示，比如"仅允许选择最底层节点"
     }
   }
   

方法二：CSS禁用非叶子节点点击+事件兜底 #

PrimeNG默认会给带有子节点的父节点添加p-treenode-parent类，利用这个类做样式控制：

1. 添加CSS样式禁用父节点的点击交互，同时保留展开/折叠图标的可操作性：

   /* 禁用非叶子节点的点击 */
   .p-treenode.p-treenode-parent {
     pointer-events: none;
     opacity: 0.7; /* 可选：视觉上区分不可选节点 */
   }
   /* 保留展开/折叠图标的点击功能 */
   .p-treenode.p-treenode-parent .p-treenode-toggler {
     pointer-events: auto;
     opacity: 1;
   }
   

2. 依然在onNodeSelect中加入兜底判断，防止键盘操作选中非叶子节点：

   nodeSelect(event: TreeNodeSelectEvent) {
     if (!event.node.leaf) {
       this.selectedIndicator = null;
     }
   }
   

方法三：自定义节点模板控制选择权限 #

通过自定义模板给非叶子节点添加不可选样式：

1. 修改树组件的模板，添加自定义节点内容：

   <p-tree
     [value]="treeItems"
     selectionMode="single"
     [(selection)]="selectedIndicator"
     (onNodeSelect)="nodeSelect()"
   >
     <ng-template let-node pTemplate="default">
       <div [class.unselectable-node]="!node.leaf">
         {{ node.label }}
       </div>
     </ng-template>
   </p-tree>
   

2. 添加对应CSS：

   .unselectable-node {
     pointer-events: none;
     opacity: 0.7;
   }
   

3. 同样配合onNodeSelect的兜底逻辑，确保选中状态正确。

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