设置UI引擎前端页面树组件属性
树组件是层级化数据展示组件，以树形结构直观呈现具备父子层级关系的数据，广泛适用于工厂-车间-设备三级台账展示、工艺工序层级管理、物料分类目录、权限角色层级分配、故障溯源树形分析等场景。该组件支持多选、节点单击交互、自定义图标及渲染逻辑等功能，可结合数据源实现动态渲染，助力用户快速定位层级化数据、完成节点选择与交互操作。
前提条件
已在当前页面添加“树”组件，具体操作请参见为UI引擎前端页面添加物料组件。
配置入口
- 在页面设计器的中心画布区，单击选中“树”组件。
- 在右侧设置面板中，单击
，即可展开“属性”设置面板。
基础信息
以下属性用于配置树组件的核心交互逻辑、数据来源及视觉样式，所有属性均支持状态变量绑定，可实现与业务数据的联动更新。
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
多选 |
是否支持多选功能。开启后，用户可同时选择多个节点。 |
是 |
|
数据源 |
树组件的核心数据源，定义树节点的层级结构和内容。 格式为嵌套的对象数组，详见数据源配置。 |
是 |
|
唯一标识 |
每个节点的唯一标识字段名称，用于区分不同节点。 |
是 |
|
渲染函数 |
定义树节点内容区的自定义渲染逻辑。 仅支持变量绑定，允许动态调整节点显示内容。 |
是 |
|
触发NodeClick事件 |
是否在单击节点时触发NodeClick事件。可用于监听用户交互并执行相关操作。 |
是 |
|
展开图标 |
设置节点展开状态时显示的图标。 |
是 |
|
收缩图标 |
设置节点收缩状态时显示的图标。 |
是 |
数据源配置
树组件的数据源是一个嵌套的对象数组，用于定义树节点的层级结构和内容。
|
字段名称 |
类型 |
说明 |
|---|---|---|
|
id/key |
string/number |
节点的唯一标识，用于区分不同节点。 |
|
label |
string |
节点的显示名称。 |
|
children |
array |
子节点列表，用于定义下一级节点。 如果没有子节点，则该字段为空数组或省略。 |
示例数据：
[
{
"id": "1",
"label": "根节点1",
"children": [
{
"id": "1-1",
"label": "子节点1-1"
},
{
"id": "1-2",
"label": "子节点1-2",
"children": [
{
"id": "1-2-1",
"label": "子节点1-2-1"
}
]
}
]
},
{
"id": "2",
"label": "根节点2"
}
]
其他
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
元素id值 |
对应HTML标签的“id”属性，同一页面内必须唯一。 |
是 |
|
样式类 |
对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。 |
是 |
|
ref引用类 |
对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。 如果为“数据源表单”组件，会自动填充默认值。 |
是 |
|
点击节点选中 |
是否通过单击节点实现选中功能。 开启后，单击节点会自动触发选中状态。 |
是 |
|
筛选函数 |
自定义筛选逻辑，用于动态过滤树节点。 支持变量绑定，可根据业务需求灵活调整筛选规则。 |
是 |
