Angular树形控件的使用

最新推荐文章于 2025-03-28 11:08:08 发布

qq_36398269

最新推荐文章于 2025-03-28 11:08:08 发布

阅读量1.5k

点赞数

分类专栏： Angular树形控件

本文链接：https://blog.csdn.net/qq_36398269/article/details/103539756

版权

本文介绍了如何在Angular应用中使用树形控件，通过HTML引入并进行双向数据绑定。内容详细讲解了在ts文件中的逻辑处理，包括定义树结构以及处理点选复选框时的逻辑，特别是针对不同层级节点的勾选状态变化。其中，`isAllChecked`用于标记有子级的项是否全选，`checked`标记无子级项的选中状态，而`parentNode`字段则记录父级的勾选状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html引入树形控件，双向绑定数据

<nz-tree  nzSize="default" [nzData]="nodesdataNew" nzCheckable nzMultiple
                  [nzCheckedKeys]="defaultCheckedKeys"  [nzExpandedKeys]="defaultExpandedKeys"
                  [nzSelectedKeys]="defaultSelectedKeys" (nzClick)="nzEvent($event)"
                  (nzExpandChange)="nzEvent($event)" (nzCheckBoxChange)="nzEvent($event)">   
 </nz-tree>

注释：
 // [nzCheckable]	节点前添加 Checkbox 复选框
 // [nzMultiple]	支持点选多个节点（节点本身）
 // [nzExpandedKeys]	展开指定的树节点
 // [nzCheckedKeys]	指定选中复选框的树节点
 // [nzSelectedKeys]	指定选中的树节点
 // (nzClick)	点击树节点触发
 // (nzExpandChange)	点击展开树节点图标触发
 // (nzCheckBoxChange)	点击树节点 Checkbox 触发

2.ts里的逻辑

定义一个树结构

//树选择器
public nodesdata:any = [
  {
    title: '日志列表',
    key:

最低0.47元/天解锁文章