Tree View树视图

何时使用#

更基础的 Tree 组件，允许在模版中定义每个组成部分，并手动管理状态。相比封装好的 Tree 组件具有更高的定制度和更好的性能。

import { NzTreeViewModule } from 'ng-zorro-antd/tree-view';

代码演示

parent 1 parent 1-0 leaf leaf parent 1-1 leaf
基本

最简单的用法，选中，禁用，展开等功能。

expand codeexpand code
加载中
Vegetables
目录

目录树

expand codeexpand code
加载中
Show Leaf Icon:
parent 1 parent 1-0 leaf leaf parent 1-1 leaf parent 1-1-0 leaf leaf leaf parent 2 leaf leaf
带连接线的树

节点之间带连接线的树，常用于文件目录结构展示。

expand codeexpand code
加载中
选择框

带选择框的树。

expand codeexpand code
加载中
异步加载数据

点击展开节点，动态加载数据。

expand codeexpand code
加载中
parent 1 parent 1-0 leaf leaf parent 1-1 leaf parent 2 leaf
可编辑

带添加和删除功能的树。

expand codeexpand code
加载中
虚拟滚动

使用虚拟滚动。

expand codeexpand code
加载中

API#

nz-tree-view#

参数说明类型默认值
[nzTreeControl]树控制器TreeControl-
[nzDataSource]用于渲染树的数组数据DataSource<T>Observable<T[]>
[nzDirectoryTree]节点是否以文件夹样式显示booleanfalse
[nzBlockNode]节点是否占据整行booleanfalse

nz-tree-virtual-scroll-view#

虚拟滚动的树视图，可以通过组件实例上的 virtualScrollViewport 成员访问 CdkVirtualScrollViewport 实例。

参数说明类型默认值
[nzTreeControl]树控制器TreeControl-
[nzDataSource]用于渲染树的数组数据DataSource<T>Observable<T[]>
[nzDirectoryTree]节点是否以文件夹样式显示booleanfalse
[nzBlockNode]节点是否占据整行booleanfalse
[nzItemSize]节点的尺寸(px)number28
[nzMinBufferPx]超出渲染区的最小缓存区大小(px)number28 * 5
[nzMaxBufferPx]需要渲染新节点时的缓冲区大小(px)number28 * 10

[nzTreeNodeDef]#

用于定义 nz-tree-node 的指令。

参数说明类型默认值
[nzTreeNodeDefWhen]用于定义是否使用此节点的方法，优先匹配第一个返回 true 的节点。如果没有返回 true 的节点，则匹配未定义此方法的节点。(index: number, nodeData: T) => boolean-

nz-tree-node#

树节点容器组件，需要通过 nzTreeNodeDef 指令定义。

[nzTreeNodePadding]#

<nz-tree-node nzTreeNodePadding></nz-tree-node>

以添加 padding 的方式显示节点缩进 性能最好。

nzTreeNodeIndentLine#

<nz-tree-node nzTreeNodeIndentLine></nz-tree-node>

以添加缩进线的方式显示节点缩进。

nz-tree-node-toggle#

切换部分，用于节点的展开/收起。

参数说明类型默认值
[nzTreeNodeToggleRecursive]是否为递归展开/收起booleanfalse

nz-tree-node-toggle[nzTreeNodeNoopToggle]#

不做任何操作的切换部分，可用于占位或者显示图标。

[nz-icon][nztreenodetogglerotateicon]#

定义切换部分中的图标，会随着展开收起状态自动旋转。

[nz-icon][nztreenodetoggleactiveicon]#

定义切换部分中的图标，使其具有激活状态的样式，可用于 loading 图标。

nz-tree-node-option#

定义节点中的可选择部分。

参数说明类型默认值
[nzSelected]是否选中booleanfalse
[nzDisabled]是否禁用booleanfalse
(nzClick)点击时的事件EventEmitter<MouseEvent>-

nz-tree-node-checkbox#

定义节点中的可勾选的部分。

参数说明类型默认值
[nzChecked]是否勾选booleanfalse
[nzIndeterminate]是否为半选booleanfalse
[nzDisabled]是否禁用booleanfalse
(nzClick)点击时的事件EventEmitter<MouseEvent>-

Classes#

NzTreeFlatDataSource extends DataSource#

构造参数#

名称说明
treeControl: FlatTreeControl<F, K>Tree 控制器
treeFlattener: NzTreeFlattener<T, F, K>用于将嵌套节点 T 处理为扁平节点 F 的展平器
initialData: T[] = []初始化数据

方法#

名称说明
connect(collectionViewer: CollectionViewer): Observable<F[]>TreeView 组件中调用，用于获取数据的更新
disconnect(): voidTreeView 组件销毁时调用
setData(value: T[]): void设置原始数据
getData(): T[]获取原始数据

NzTreeFlattener#

将具有子节点的嵌套数据转换为具有级别（level）信息的转换器类。

构造参数#

名称说明
transformFunction: (node: T, level: number) => F接收一个嵌套节点，返回扁平节点
getLevel: (node: F) => number定义获取 level 属性的方法
isExpandable: (node: F) => boolean定义是否为可展开节点的方法
getChildren: (node: T) => Observable<T[]> | T[] | undefined | null定义从嵌套数据中获取子节点的方法

方法#

名称说明
flattenNodes(structuredData: T[]): F[]接收嵌套数据，返回扁平数据
expandFlattenedNodes(nodes: F[], treeControl: TreeControl<F, K>): F[]按 TreeControl 中的展开状态获取节点