树组件

1. 组件概述

树组件是一个数据输入组件，用于在层级结构数据中进行选择。它以树形结构展示选项，支持父子节点的层级关系，用户可以展开、收起节点，并选择其中的一个或多个选项。树组件支持两种外观模式：内嵌模式（直接在页面中展示树结构）和浮层模式（点击后弹出下拉面板展示树结构）。适用于需要从具有层级关系的数据中进行选择的场景，如知识分类选择、课程章节选择、组织架构选择等。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：知识分类选择。在学习辅导类应用中，用户需要选择想要学习的知识点分类。使用树组件展示学科-章节-知识点的层级结构，用户可以逐级展开找到目标知识点。开启「可检索」功能，方便用户通过关键词快速定位。
• 场景二：多标签筛选。在文化探索类应用中，用户可以选择多个感兴趣的主题标签（如朝代-人物-事件）。开启「多选」模式，设置「子节点自动选」，当用户选择某个朝代时自动选中该朝代下的所有人物和事件，方便批量选择。

加载中...

查看 JSON

复制 JSON

3. 功能配置

高级

基本折叠组

配置项	说明
绑定变量	组件的变量名，用户选择的值会以此变量名存储。其他组件可以绑定此变量来获取选中的值，调用工作流时此变量的值也会传递给工作流。
标题	组件左侧显示的标签文字，用于说明该选择项的用途，如「选择分类」、「选择章节」。
模式	树组件的外观模式。「内嵌」模式直接在页面中展示完整的树结构，适合选项较少或需要一目了然查看所有选项的场景；「浮层」模式以下拉框形式展示，点击后弹出树结构面板，适合选项较多或需要节省页面空间的场景。
可清除	仅在浮层模式下显示。开启后，选择框右侧会显示清除按钮，点击可一键清空已选内容。
可检索	开启后，组件顶部会显示搜索框，用户可以输入关键词快速筛选匹配的节点。适用于选项较多、层级较深的场景，帮助用户快速定位目标选项。
选项搜索接口	仅在内嵌模式且开启可检索时显示。配置远程搜索接口后，用户输入关键词时会调用该接口获取匹配的选项，适用于选项数据量大、需要服务端搜索的场景。
多选	开启后允许用户选择多个节点。关闭时为单选模式，用户只能选择一个节点。
节点最小数	多选模式下生效。设置表单校验时最少需要选中的节点数量。
节点最大数	多选模式下生效。设置表单校验时最多可选中的节点数量。
子节点自动选	多选模式下生效，默认开启。开启后，当选中父节点时会自动级联选中其所有子节点。关闭后，选中父节点不会影响子节点的选中状态。
子节点可反选	多选模式下，且开启「子节点自动选」时生效。开启后，即使父节点被选中，用户仍可以单独取消某个子节点的选中状态，此时选中的值会同时包含父节点和子节点。
子节点反选取消父节点	多选模式下，且开启「子节点可反选」时生效。开启后，当取消任意子节点的选中状态时，会同时取消其父节点的选中状态。
值包含父节点	多选模式下生效。开启后，选中父节点时，提交的值会同时包含父节点和所有子节点的值；关闭时，只保留父节点的值。
值只含子节点	多选模式下，且开启「子节点自动选」时生效。开启后，即使选中了父节点，提交的值也只包含叶子节点（最底层子节点）的值，不包含父节点。
默认值	组件的初始选中值。可以设置为静态值或绑定变量，在组件加载时自动选中对应的节点。仅在配置了选项数据时显示。
标题提示	在标题旁边显示一个小问号图标，鼠标悬停时弹出提示内容。适合放置简短的帮助说明。
控件提示	在组件旁边显示一个小问号图标，鼠标悬停时弹出提示内容。
占位提示	未选择任何选项时显示的灰色提示文字，引导用户进行选择，如「请选择分类」。
描述	显示在组件下方的浅色说明文字，用于补充解释该配置项的用途或选择要求。

选项折叠组

配置项	说明
数据	配置树组件的选项数据。可以手动添加选项，每个选项包含显示文本和值，还可以为选项添加子选项形成层级结构。也可以通过接口动态获取选项数据。
自定义选项模板	自定义每个选项的显示样式。开启后可以配置模板，使用变量引用选项的各个字段，实现更丰富的选项展示效果。
懒加载接口	配置子节点的懒加载接口。当节点数据量大时，可以先只加载顶层节点，用户展开某个节点时再通过此接口加载其子节点，提升初始加载性能。
懒加载字段	指定标识节点是否需要懒加载的字段名称，默认为「defer」。当选项数据中该字段值为 true 时，表示该节点的子节点需要通过懒加载接口获取。
加载状态	配置数据加载时的加载动画样式。仅在配置了数据接口时显示。
节点行为	设置点击节点时的行为。可选「选中」（点击节点选中该节点）和「展开」（点击节点展开/收起该节点）。可以同时勾选两个选项，此时点击节点会同时触发选中和展开。
只可选择叶子节点	开启后，用户只能选择没有子节点的叶子节点，父节点不可被选中。适用于只需要选择最细粒度选项的场景。
可创建	开启后，用户可以在树中新增节点。适用于需要用户自定义选项的场景。
顶层可新增	可创建模式下生效。开启后允许在树的顶层添加新节点。
根节点文案	可创建模式下，顶层新增按钮显示的文字，默认为「添加一级节点」。
新增文案提示	可创建模式下，子节点新增按钮显示的文字，默认为「添加子节点」。
可编辑	开启后，用户可以编辑已有节点的内容。
编辑文案提示	可编辑模式下，编辑按钮的提示文字，默认为「编辑该节点」。
可删除	开启后，用户可以删除树中的节点。
删除文案提示	可删除模式下，删除按钮的提示文字，默认为「移除该节点」。
操作栏位置	设置节点操作按钮（新增、编辑、删除）的显示位置，可选「左侧」或「右侧」。
自定义操作	开启后可以自定义节点的操作按钮，替换默认的新增、编辑、删除按钮，实现更灵活的节点操作功能。

高级折叠组

配置项	说明
高亮节点字符	仅在内嵌模式下显示。设置需要高亮显示的文字，树中包含该文字的节点会被高亮标记。可以设置为静态值或绑定变量。
选项值包含父节点	开启后，选中节点的值会包含从根节点到该节点的完整路径。例如选中「数学-代数-方程」，值会是「数学/代数/方程」而不只是「方程」。
路径分隔符	开启「选项值包含父节点」后显示。设置路径中各级节点之间的分隔符，默认为「/」。
显示顶级节点	仅在内嵌模式下显示。开启后会在树的最顶层显示一个虚拟的根节点，所有实际选项都作为该根节点的子节点。
节点文案	显示顶级节点时，根节点显示的文字，默认为「顶级」。
选项文本仅显示选中节点	仅在浮层模式下显示。开启后，选择框中只显示选中节点本身的文本，不显示其父节点路径。
显示节点图标	默认开启。开启后每个节点前会显示图标（文件夹或文件图标），关闭后不显示图标。
显示节点勾选框	单选模式下生效。开启后即使是单选，每个节点前也会显示勾选框，使选中状态更明显。
显示层级展开线	开启后会显示连接各层级节点的竖线，使层级关系更清晰直观。
自定义展开层级	默认展开所有节点层级。开启后可以设置初始只展开到第几层，超过该层级的节点默认收起。
设置层级	开启自定义展开层级后显示。设置初始展开的层级数，如设置为 1 表示只展开第一层。
虚拟列表阈值	当选项数量超过设置的阈值后，会自动开启虚拟列表渲染以优化性能。适用于选项数量非常多的场景。
选项高度	开启虚拟列表后，设置每个选项的固定高度（像素），用于虚拟列表的计算。

状态折叠组

配置项	说明
可见	控制组件是否显示。默认可见。可以设置为始终可见/隐藏，或根据条件动态控制。
隐藏	控制组件是否隐藏。与「可见」相反。
禁用	控制组件是否禁用。禁用后组件变灰且不可操作。
静态展示	开启后，组件变为只读的纯文本展示模式，不可进行选择操作。适用于详情页或确认页面。
隐藏时删除字段	开启后，当该组件被隐藏时，其值会从表单数据中删除。适用于条件显示的字段，避免提交无关数据。

校验折叠组

配置项	说明
必填	开启后，该字段必须选择至少一个选项才能提交表单。

设计

表单项折叠组

配置项	说明
高度设置	设置树组件的高度模式。「固定」模式下组件高度固定，内容超出时可滚动；「适配内容」模式下组件高度随内容自动调整。
固定高度	高度设置为「固定」时显示。设置组件的固定高度值。

事件

事件折叠组

配置项	说明
添加事件	树组件支持多种触发事件：「值变化」在用户选择或取消选择节点时触发，常用于根据选择结果更新其他组件或调用工作流；「节点点击」在用户点击任意节点时触发；「懒加载完成」在通过懒加载接口成功获取子节点数据后触发。此外还支持节点的新增、编辑、删除等事件。