如何禁止用户选择PrimeNG p-treeSelect组件的部分选项？

方法一：利用节点内置的disabled属性 #

PrimeNG的TreeSelect组件支持直接给节点对象添加disabled属性，设置为true即可禁用该节点，组件会自动处理禁用状态（复选框灰化、无法点击）。

示例代码（TS）：

// 构造节点数据时给需要禁用的节点添加disabled属性
this.nodes = [
  {
    label: '父节点1',
    children: [
      { label: '子节点1-1', value: '1-1' },
      { label: '子节点1-2', value: '1-2', disabled: true }, // 禁用此子节点
      { label: '子节点1-3', value: '1-3' }
    ]
  },
  {
    label: '父节点2',
    value: '2',
    disabled: true // 禁用整个父节点（包括其下所有子节点）
  }
];

模板无需额外修改，保持你原有的代码即可。

方法二：通过beforeSelect事件动态拦截选择 #

如果需要根据动态条件（如用户权限、实时状态）控制节点禁用，可以使用组件的beforeSelect事件拦截选择操作，在事件回调中判断是否允许选择。

步骤1：修改模板添加事件绑定

<p-treeSelect 
    class="w-full md:w-20rem" 
    containerStyleClass="w-full" 
    [(ngModel)]="selectedNodes" 
    [options]="nodes" 
    display="chip" 
    [metaKeySelection]="false" 
    selectionMode="checkbox" 
    placeholder="Select Item"
    (beforeSelect)="onBeforeSelect($event)" />

步骤2：实现事件回调（TS）

onBeforeSelect(event: any) {
  // 根据自定义条件判断是否禁用当前节点
  const targetNode = event.node;
  // 示例：禁止选择value为"1-2"或label为"父节点2"的节点
  if (targetNode.value === '1-2' || targetNode.label === '父节点2') {
    event.preventDefault(); // 阻止选择操作
  }
}

该方法支持动态调整禁用规则，适合复杂场景。如果需要禁用父节点同时禁止选中其子节点，可以在回调中递归检查节点的父级状态。

可选：自定义禁用样式 #

如果需要强化禁用节点的视觉效果，可以添加自定义CSS：

.p-treeselect .p-treenode-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.p-treeselect .p-treenode-disabled .p-checkbox {
  pointer-events: none;
}

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