PrimeNG TreeSelect：点击展开含子节点的节点且仅可选叶子节点

针对你提的两个需求，直接给落地解决方案：

一、点击含子节点的节点时自动展开，而非触发选中 #

TreeSelect默认点击节点会触发选中逻辑，通过onNodeClick事件拦截处理即可：

模板代码 #

<p-treeSelect 
  [options]="categoryList" 
  [(ngModel)]="selectedItem"
  (onNodeClick)="onNodeClick($event)"
  selectionMode="single"
  placeholder="选择分类">
</p-treeSelect>

组件类逻辑 #

通过ViewChild获取TreeSelect实例，调用官方内置的toggleNode方法切换展开状态，同时清空误选中的父节点：

import { Component, ViewChild } from '@angular/core';
import { TreeSelect } from 'primeng/treeselect';
import { ICategorySelectListDto } from './your-path';

@Component({
  // 组件元数据
})
export class YourComponent {
  categoryList: ICategorySelectListDto[] = [];
  selectedItem: ICategorySelectListDto | undefined;

  @ViewChild(TreeSelect) treeSelectComponent!: TreeSelect;

  onNodeClick(event: { node: ICategorySelectListDto }) {
    // 判断当前节点是否存在子节点
    if (event.node.children && event.node.children.length > 0) {
      // 切换节点展开/折叠状态
      this.treeSelectComponent.toggleNode(event.node);
      // 若父节点被误选中，直接清空
      if (this.selectedItem === event.node) {
        this.selectedItem = undefined;
      }
    }
  }
}

二、仅允许选中无子女的叶子节点 #

两种简单实现方式，选适合你的即可：

方式1：给非叶子节点添加禁用属性（推荐） #

先转换分类数据，给所有含子节点的节点加上disabled字段，再通过TreeSelect的optionDisabled属性绑定：

// 递归转换数据，标记非叶子节点为禁用
transformCategoryData(categories: ICategorySelectListDto[]): ICategorySelectListDto[] {
  return categories.map(cat => {
    const transformedCat = { ...cat };
    // 有子节点则标记禁用
    transformedCat.disabled = !!cat.children && cat.children.length > 0;
    // 递归处理子节点
    if (cat.children) {
      transformedCat.children = this.transformCategoryData(cat.children);
    }
    return transformedCat;
  });
}

// 初始化时调用转换
ngOnInit() {
  // originalData为接口获取的原始分类数据
  this.categoryList = this.transformCategoryData(originalData);
}

更新模板，添加optionDisabled绑定：

<p-treeSelect 
  [options]="categoryList" 
  [(ngModel)]="selectedItem"
  (onNodeClick)="onNodeClick($event)"
  selectionMode="single"
  optionDisabled="disabled"
  placeholder="选择分类">
</p-treeSelect>

方式2：选中时校验拦截 #

如果不想修改原始数据，可在onSelectionChange事件里判断选中节点是否为叶子节点，非叶子节点直接取消选中：

onSelectionChange(event: { value: ICategorySelectListDto }) {
  const selectedNode = event.value;
  if (selectedNode.children && selectedNode.children.length > 0) {
    // 选中父节点，直接清空选择
    this.selectedItem = undefined;
    // 可选：添加提示告知用户规则
    // this.messageService.add({ severity: 'warn', detail: '仅支持选择叶子节点' });
  }
}

模板添加事件绑定：

<p-treeSelect 
  [options]="categoryList" 
  [(ngModel)]="selectedItem"
  (onNodeClick)="onNodeClick($event)"
  (onSelectionChange)="onSelectionChange($event)"
  selectionMode="single"
  placeholder="选择分类">
</p-treeSelect>

补充说明 #

你提到的CascadeSelect确实不适合深度不一致的树形结构，它更适配层级固定的级联场景，TreeSelect才是不规则树形结构的正确选择。

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