# 设置UI引擎前端页面树组件属性
树组件是层级化数据展示组件，以树形结构直观呈现具备父子层级关系的数据，广泛适用于工厂-车间-设备三级台账展示、工艺工序层级管理、物料分类目录、权限角色层级分配、故障溯源树形分析等场景。该组件支持多选、节点单击交互、自定义图标及渲染逻辑等功能，可结合数据源实现动态渲染，助力用户快速定位层级化数据、完成节点选择与交互操作。
#### 前提条件
已在当前页面添加"树"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
#### 配置入口
1. 在页面设计器的中心画布区，单击选中"树"组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002507555508.png)，即可展开"属性"设置面板。
 
#### 基础信息
以下属性用于配置树组件的核心交互逻辑、数据来源及视觉样式，所有属性均支持状态变量绑定，可实现与业务数据的联动更新。
| 属性名称          | 说明                                                                                                                                             | 是否支持变量绑定 |
|:---|:---|:---|
| 多选            | 是否支持多选功能。开启后，用户可同时选择多个节点。                                                                                                                      | 是        |
| 数据源           | 树组件的核心数据源，定义树节点的层级结构和内容。 格式为嵌套的对象数组，详见[数据源配置]。 | 是        |
| 唯一标识          | 每个节点的唯一标识字段名称，用于区分不同节点。                                                                                                                        | 是        |
| 渲染函数          | 定义树节点内容区的自定义渲染逻辑。 仅支持变量绑定，允许动态调整节点显示内容。                                                          | 是        |
| 触发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"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是        |
| 点击节点选中 | 是否通过单击节点实现选中功能。 开启后，单击节点会自动触发选中状态。                                                | 是        |
| 筛选函数   | 自定义筛选逻辑，用于动态过滤树节点。 支持变量绑定，可根据业务需求灵活调整筛选规则。                                           | 是        |