【DevUI】用于表现层级嵌套结构数据的核心Tree 树组件

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

前言

本文系统性地介绍了 DevUI 框架中的 Tree 树组件，涵盖其使用方法、核心功能及代码实现细节。该组件基于 Angular ^18.0.0 构建，适用于展示具有层级关系的数据结构，并支持多种交互操作。

1. 组件简介

Tree 树组件是 DevUI 中用于呈现嵌套层级数据的核心 UI 元素，主要分为以下两类：

• 基础树：侧重于数据的结构化展示，支持节点的展开与收起。

  <d-tree>

• 可操作树：在基础功能之上扩展了复选、编辑、拖拽、搜索等高级特性，具备完整的用户交互能力。

  <d-operable-tree>

2. 主要功能与示例代码

2.1 基本使用方式

最简单的应用场景是渲染一个静态的树形结构。可通过如下模板实现：

<d-tree [tree]="basicData" (nodeSelected)="onNodeSelected($event)"></d-tree>

若需调整层级之间的缩进距离（默认为 24px），可设置 indent 属性：

<d-tree [tree]="basicData" [indent]="'8px'"></d-tree>

关键配置说明：

• [tree]：绑定树形数据源。
• (nodeSelected)：监听节点被选中事件。
• (expandedChange)：监听节点展开或折叠状态变化。
• [indent]：定义每层节点的缩进值。

[tree]

(nodeSelected)

(nodeToggled)

[indent]

2.2 支持勾选的树结构

通过启用复选框功能，并结合 checkableRelation 属性控制父子节点间的选中逻辑，可实现四种不同的联动模式：

<d-operable-tree [tree]="data1" [checkableRelation]="'both'"></d-operable-tree>
<d-operable-tree [tree]="data2" [checkableRelation]="'upward'"></d-operable-tree>
<d-operable-tree [tree]="data3" [checkableRelation]="'downward'"></d-operable-tree>
<d-operable-tree [tree]="data4" [checkableRelation]="'none'"></d-operable-tree>

联动策略解释：

• both：父子节点完全联动，任一方向变更都会影响另一方。
• upward：仅子节点影响父节点，例如全选子节点后父节点变为全选或半选。
• downward：仅父节点影响子节点，父节点选中则所有子节点同步选中。
• none：无联动关系，各节点独立管理选中状态。

<d-operable-tree>

[checkableRelation]

both

upward

downward

none

2.3 节点增删改操作

可操作树允许对节点执行添加、删除和修改操作，既可通过内置按钮触发，也可通过外部控件调用实例方法实现：

<d-operable-tree
    #operableTree
    [tree]="data"
    [addable]="true"
    [editable]="true"
    [deletable]="true"
    [beforeDeleteNode]="beforeDeleteNode"
    (nodeEdited)="onNodeEdited($event)">
</d-operable-tree>

<!-- 外部控制按钮 -->
<d-button (click)="operableTree.addNode(node)">添加子节点</d-button>
<d-button (click)="operableTree.editNode(node)">编辑节点</d-button>
<d-button (click)="operableTree.deleteNode(node)">删除节点</d-button>

要点说明：

• 通过 [addable]、[editable]、[deletable] 属性开启对应功能。
• 利用 [beforeDeleteNode] 等钩子函数进行删除前的校验或拦截处理。
• 借助模板引用变量（如 #operableTree）获取组件实例，从而以编程方式调用 addNode、editNode、deleteNode 等方法。

[addable]

[editable]

[deletable]

beforeAddNode/EditNode/DeleteNode

#operableTree

2.4 实现搜索与过滤功能

结合 d-search 组件与树提供的 API 方法，可以实现动态搜索并高亮匹配节点的效果：

<d-search [placeholder]="'搜索节点...'" (searchFn)="onSearch($event)"></d-search>
<d-operable-tree #operableTree [tree]="data"></d-operable-tree>

在组件类中，需编写 onSearch 方法处理输入内容，并调用树组件暴露的方法（如 filterNodes 或 updateFilteredTree）来刷新视图。

d-search

treeFactory

treeFactory.searchTree

2.5 自定义图标与节点模板

支持通过 slot 或 template 定义自定义图标及节点内容布局，提升视觉表现力与信息承载能力。开发者可根据业务需求替换默认图标，或插入额外元素（如标签、状态指示器等）。

该组件具备高度的可定制性，允许开发者全面掌控节点图标的展示、内容区域以及操作按钮的样式表现。

<d-operable-tree [tree]="data">
<!-- 自定义节点前的图标 -->
<ng-template #iconTemplate let-node="node">
<i [class]="getIconClass(node)"></i>
</ng-template>

<!-- 自定义整个节点的内容显示 -->
<ng-template #nodeTemplate let-node="node">
<span [class.highlight]="node.isActive">{{ node.title }}</span>
<span class="custom-badge">{{ node.count }}</span>
</ng-template>
</d-operable-tree>

[draggable]=“true”

2.6 支持拖拽的树形结构

启用拖拽功能后，用户可在同一棵树内调整节点顺序，也支持跨树或与外部元素之间的拖放交互。

<d-operable-tree
[tree]="data"
[draggable]="true"
[dropType]="'drag insert'"
(nodeOnDrop)="onDrop($event)">
</d-operable-tree>

核心属性说明：

• [dropType]

  ：用于设定拖放行为类型，例如

  ‘insert‘

  （插入模式）和

  ‘drag insert‘

  （拖拽并插入）等选项。

• (nodeDragStart)

  /

  (nodeOnDrop)

  ：分别用于监听拖拽开始与结束时触发的事件回调。

2.7 节点懒加载机制

针对大型树结构，若子节点数据需按需加载，可通过懒加载策略有效提升初始渲染性能。

<d-tree
[tree]="lazyLoadData"
(nodeToggled)="loadChildren($event)"
[loadingTemplateRef]="customLoadingTemplate">
</d-tree>

<ng-template #customLoadingTemplate>
<div>正在加载...</div>
</ng-template>

关键实现逻辑在于利用

(nodeToggled)

事件判断当前节点是否首次展开。若是，则动态请求其子级数据，并更新至树中。

2.8 面向大数据量的虚拟滚动

当处理成千上万条节点数据时，开启虚拟滚动可避免一次性生成全部 DOM 元素，显著优化页面性能。

<d-operable-tree
[tree]="hugeData"
[virtualScroll]="true"
[virtualScrollHeight]="'600px'"
[minBufferPx]="600"
[maxBufferPx]="1200">
</d-operable-tree>

3. 高级配置与实用工具函数

3.1 灵活映射自定义数据字段名

当后端返回的数据结构字段名称与组件默认约定（如

id

、

title

、

children

）不一致时，可通过配置项进行字段映射。

<d-operable-tree
[tree]="customData"
[treeNodeIdKey]="'key'"
[treeNodeTitleKey]="'label'"
[treeNodeChildrenKey]="'items'">
</d-operable-tree>

treeFactory

3.2 利用

treeFactory

提供的工具方法

该模块封装了一系列强大的编程式操作接口，便于以代码方式控制树的状态变化，无需直接修改原始数据源。

import { treeFactory } from 'ng-devui/tree';

// 示例：全选所有节点
checkAllNodes() {
  const treeInstance = this.operableTree.treeFactory;
  treeInstance.checkAllNodes(true); // true 表示勾选，false 表示取消勾选
}

// 根据节点 ID 执行获取、激活、隐藏、禁用等操作
treeInstance.getNodeById('nodeId');
treeFactory.activeNodeById('nodeId');
treeFactory.hideNodeById('nodeId', true);

这些 API 极大地提升了对树组件行为控制的灵活性和开发效率。

4. 功能特性快速查阅表

为方便开发者快速定位所需功能，以下列出 Tree 组件主要特性的对比信息：

功能特性	适用组件	关键属性/方法	说明
基础展示	<d-tree>	[tree] , [indent]	用于渲染层级结构，支持自定义缩进样式
节点勾选	<d-operable-tree>	-	支持多选或单选节点操作

DevUI 的 Tree 组件是一款功能丰富、性能优越且具备高度可定制性的企业级树形控件，适用于多种复杂场景。无论是基础的层级展示，还是涉及交互操作的管理后台应用，该组件均能提供灵活而高效的解决方案。

核心特性一览

父子节点勾选联动
支持四种不同的勾选行为模式，满足多样化的业务逻辑需求，确保在多层级选择时的准确性与一致性。

[checkableRelation]

节点操作支持完善
提供新增、删除、修改等基本操作，并可在执行前通过拦截机制进行条件判断或数据校验，提升操作安全性与可控性。

<d-operable-tree>

[addable/editable/deletable]

,

before*

回调机制健全
所有关键操作均配备相应的事件回调，便于开发者实时响应用户行为并进行后续处理。

搜索与过滤能力
结合关键词输入，利用

d-search

和

treeFactory.searchTree

实现对树节点的动态搜索和精准过滤，帮助用户快速定位目标节点。

<d-operable-tree>

自定义模板支持
允许完全自定义节点图标及内容渲染方式，通过

#iconTemplate

和

#nodeTemplate

等配置实现个性化展示效果，提升界面表现力。

<d-operable-tree>

拖拽排序功能
支持树内节点重排以及跨区域拖拽，结合

[draggable]=“true”

和

[dropType]

提供直观的交互体验，适用于需要调整结构顺序的场景。

<d-operable-tree>

懒加载机制
在节点动态展开时按需加载子级数据，配合

(nodeToggled)

事件和

[loadingTemplateRef]

触发策略，有效减少初始请求压力，提升响应速度。

<d-tree>

虚拟滚动优化
面对海量节点渲染场景，启用虚拟滚动可显著提高性能表现，仅渲染可视区域内容，结合

[virtualScroll]=“true”

和

[virtualScrollHeight]

实现流畅浏览体验。

<d-operable-tree>

数据键名映射
可适配任意自定义的数据结构字段命名规则，通过

[treeNode*Key]

（如

treeNodeIdKey

）进行字段映射，无需改造后端接口即可无缝对接。

<d-operable-tree>

编程式控制能力
提供丰富的工具函数 API，支持通过代码方式实现节点的勾选、展开、禁用等状态控制，结合

treeFactory

可轻松完成批量操作或自动化流程。

<d-operable-tree>

使用建议

从数据结构入手
确保传入的数据为嵌套格式，并明确了解各层级字段名称。若字段名不标准，及时使用

[treeNode*Key]

进行映射处理，保障组件正常解析。

按需启用功能模块
根据实际业务场景选择性开启

checkable

、

draggable

等高级特性，避免引入不必要的复杂度，保持系统简洁高效。

善用 API 工具函数
对于全选、展开全部、定位节点等程序化控制需求，优先使用封装好的工具方法

treeFactory

，相比手动遍历修改数据更为安全便捷。

关注性能优化策略
当树节点数量庞大时，推荐优先采用懒加载策略，或开启虚拟滚动功能，以保证页面渲染流畅，避免卡顿或内存溢出问题。

总结

DevUI Tree 组件集成了企业级应用所需的核心功能，在易用性、扩展性和性能之间取得了良好平衡。对于简单的树形展示需求，使用

<d-tree>

即可快速实现；而对于包含勾选、编辑、拖拽等复杂交互的管理型后台系统，

<d-operable-tree>

几乎覆盖了所有常见场景，真正做到开箱即用。

参考文档

MateChat：https://gitcode.com/DevCloudFE/MateChat

MateChat官网：https://matechat.gitcode.com

DevUI官网：https://devui.design/home

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：Tree Vui dev Template relation