如何用下拉框替代NG-ZORRO Tree叶子节点的复选框？

问题核心是你给nz-tree添加了nzCheckable属性，这个属性会强制给所有节点渲染默认复选框，覆盖自定义模板的部分逻辑。以下是修正后的实现方案：

1. 移除全局复选框配置 #

首先去掉<nz-tree>上的nzCheckable属性，避免自动生成所有节点的复选框，完全由自定义模板控制节点内容。

2. 修正模板代码 #

调整nzTreeTemplate模板，确保叶子节点显示下拉框，非叶子节点显示复选框，同时绑定节点选中状态：

<nz-tabset nzType="card">
  <nz-tree [nzData]="objectModel2">
    <ng-template #nzTreeTemplate let-node>
      <!-- 叶子节点显示多选下拉框 -->
      <ng-container *ngIf="node.isLeaf">                           
        <nz-select nzMode="multiple" [(ngModel)]="listOfSelectedValue">
          <nz-option nzValue="1" nzLabel="选项1"></nz-option>
          <nz-option nzValue="2" nzLabel="选项2"></nz-option>
          <nz-option nzValue="3" nzLabel="选项3"></nz-option>
        </nz-select>
      </ng-container>
      <!-- 非叶子节点显示复选框，绑定节点checked状态 -->
      <ng-container *ngIf="!node.isLeaf">
        <nz-checkbox 
          [(ngModel)]="node.checked"
          [nzIndeterminate]="node.isHalfChecked"
          (ngModelChange)="onNodeCheckChange(node)"
        >
          {{ node.title }}
        </nz-checkbox>
      </ng-container>
    </ng-template>
  </nz-tree>
</nz-tabset>

3. 组件逻辑补充（处理节点选中联动） #

去掉nzCheckable后，默认的父子节点选中联动会失效，需要手动实现这个逻辑，在Component中添加以下方法：

import { Component, ViewChild } from '@angular/core';
import { NzTreeComponent, NzTreeNode } from 'ng-zorro-antd/tree';
import { objectModel2 } from './select-informations-request.metadata';

@Component({
  selector: 'tree',
  templateUrl: './tree.component.html'
})
export class SelectInformationsRequestComponent {
  objectModel2: any = objectModel2;

  @ViewChild(NzTreeComponent, { static: false }) nzTreeComponent!: NzTreeComponent;

  listOfSelectedValue = ['1', '2'];

  // 处理节点选中状态变化，同步父子节点状态
  onNodeCheckChange(node: NzTreeNode): void {
    // 同步子节点状态
    if (node.children) {
      node.children.forEach(child => {
        child.checked = node.checked;
        child.isHalfChecked = false;
        this.syncChildNodeStatus(child, node.checked);
      });
    }
    // 同步父节点状态
    this.syncParentNodeStatus(node.parent);
  }

  // 递归同步子节点状态
  private syncChildNodeStatus(node: NzTreeNode, checked: boolean): void {
    if (node.children) {
      node.children.forEach(child => {
        child.checked = checked;
        child.isHalfChecked = false;
        this.syncChildNodeStatus(child, checked);
      });
    }
  }

  // 同步父节点的选中/半选状态
  private syncParentNodeStatus(parentNode: NzTreeNode | null): void {
    if (!parentNode) return;

    const children = parentNode.children || [];
    const checkedCount = children.filter(child => child.checked).length;
    
    if (checkedCount === 0) {
      parentNode.checked = false;
      parentNode.isHalfChecked = false;
    } else if (checkedCount === children.length) {
      parentNode.checked = true;
      parentNode.isHalfChecked = false;
    } else {
      parentNode.checked = false;
      parentNode.isHalfChecked = true;
    }

    // 继续向上同步父节点的父节点
    this.syncParentNodeStatus(parentNode.parent);
  }
}

关键说明 #

• 移除nzCheckable是核心：这个属性会自动给每个节点添加复选框，即使使用自定义模板，默认复选框仍然会被渲染，导致和自定义内容冲突。
• 手动实现联动逻辑：去掉nzCheckable后，Tree组件不再自动处理父子节点的选中状态联动，需要自行编写方法同步状态，保证树形结构的选中逻辑正常。
• 下拉框补充选项：原代码中nz-select未添加nz-option，需要补充才能正常显示可选内容。

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