zorro的树-tree

蒲公英

于 2021-01-07 15:29:30 发布

阅读量1k

点赞数

分类专栏： ng-zorro 文章标签： angular

本文链接：https://blog.csdn.net/weixin_45158253/article/details/112308559

版权

本文介绍了Zorro框架中的三种树形组件：TreeSelect、Tree和TreeView的使用，重点讲述了在项目中实现树形控件显示、树选择功能及编辑树选择的详细步骤，包括各项属性如nzData、nzExpandedKeys、nzSelectedKeys的配置和事件监听。

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

前提

在zorro里有三类tree（随着zorro的更新，可能会更多）
1、TreeSelect 树选择
2、Tree 树形控件
3、Tree View 树视图
使用起来大差不差
之前有对 tree树形控件做详细使用过程
地址：https://blog.csdn.net/weixin_45158253/article/details/109115843
这里是写我在项目里的使用tree的思路，方便以后过来拿代码

项目结果展示

在这里插入图片描述

实现

1、树形控件的显示

<nz-tree 
  [nzData]="tree" 
  nzBlockNode 
  [nzExpandedKeys]="expandKeys" 
  (nzClick)="onChangeTree($event)"
  [nzSelectedKeys]='selectedKeys'
  ></nz-tree>

nzData是绑定的树
nzExpandedKeys是默认展开项
nzClick是点击事件
nzSelectedKeys是默认选中项
后台设置value表示向前选中项的key
注意这几项是数组还是字符串