# 设置UI引擎前端页面模板树组件属性
模板树是UI引擎基于xDM-F数据模型开发的树形结构组件，适用于工业场景中设备层级展示、工艺流程可视化、物料清单管理等需求，可通过API动态加载数据或绑定本地数据源，支持节点懒加载、自定义渲染及复杂交互操作。
#### 前提条件
- 已在当前页面添加"模板树"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
- 已创建数据源，具体操作请参见[为UI引擎前端项目创建数据源](https://support.huaweicloud.com/usermanual-idme/idme_ui_0107.html)。
 
#### 配置入口
1. 在页面设计器的中心画布区，单击选中"模板树"组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002535352537.png)，即可展开"属性"设置面板。
 
#### 模型信息
此部分配置用于绑定xDM-F数据模型，确保树形数据与业务系统的数据源对接。
| 属性名称  | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | 是否支持变量绑定 |
|:---|:---|:---|
| xdm模型 | 用于为树形结构绑定xDM-F数据模型，从而实现树形数据与业务系统数据源的无缝对接。配置步骤： 1. 单击"选择模型"，弹出"绑定数据模型"窗口。  2. 在弹出的窗口中，依次完成以下选择： - 选择xDM-F模型服务：从下拉列表中选择已在"数据源管理"中创建的xDM-F模型服务。 如果列表为空，请先前往"数据源管理"创建，具体操作请参见[为UI引擎前端项目创建数据源](https://support.huaweicloud.com/usermanual-idme/idme_ui_0107.html)。   - 选择租户：根据所选的xDM-F模型服务，选择其应用运行态下的目标租户。  - 选择目标数据模型：根据所选租户，从其可用模型列表中选择需要绑定的数据模型。    3. 单击"确认"，完成绑定。该模型将作为树形结构的数据源基础。   | 否        |
   
#### 基础信息
此部分配置用于配置模板树的展示样式、数据加载方式及交互行为，满足用户的个性化需求。
| 属性名称    | 说明                                                                                                                  | 是否支持变量绑定 |
|:---|:---|:---|
| 数据源     | 树组件的原始数据。可通过API接口或本地JSON数据绑定，支持动态更新。                                                                                | 是        |
| 属性映射    | 当传入数据为非标准格式时，指定数据字段与树节点属性的映射关系（如将设备ID映射为节点key，设备名称映射为节点标签）。                                                         | 是        |
| 节点标识key | 节点唯一标识的属性名称（如设备ID、工序编号），确保节点操作的唯一性。                                                                                 | 是        |
| 子节点缩进   | 相邻层级节点间的水平缩进距离，优化树形结构的视觉层次感。单位为像素（px）。                                                                              | 是        |
| 手风琴模式   | 控制是否开启手风琴模式。 开启后同一层级每次仅展开一个树节点，其他同级节点将自动折叠。适用于需分类展示的场景（例如按产线分类查看设备列表）。 | 是        |
| 节点触发展开  | 单击节点名称时是否自动展开子节点，提升操作便捷性。                                                                                           | 是        |
| 仅子节点可选  | 限制只能选中叶子节点（末端节点）。                                                                                                   | 是        |
| 启用懒加载   | 控制是否开启异步加载模式。 开启后，展开节点时再请求子节点数据（如加载某产线下的所有设备），优化大数据量场景的性能。          | 是        |
| 加载函数    | 懒加载时调用的方法，需在函数内通过"resolve(data)"返回子节点数据，支持自定义数据处理逻辑（如过滤无效设备）。                                                       | 是        |
| 单次数据条数  | 懒加载时每次请求返回的子节点数量，默认50条，可根据数据量调整。                                                                                    | 是        |
| 自定义标签   | 自定义节点标签显示内容（如"设备名称 + 型号"），支持HTML格式渲染。                                                                               | 是        |
| 节点图标    | 节点包含子节点时显示的图标（如文件夹图标），可通过样式类自定义。                                                                                    | 是        |
| 展开图标    | 节点展开时显示的图标（如向下箭头）。                                                                                                  | 是        |
| 收起图标    | 节点收起时显示的图标（如向右箭头）。                                                                                                  | 是        |
| 图标大小    | 节点图标的尺寸（单位：px），默认14px。                                                                                              | 是        |
| 默认展开节点  | 配置初始化时默认展开的节点（如根节点"全部产线"）。                                                                                          | 是        |
   
#### 参数配置（适用于查询根节点）
此部分配置用于优化xDM-F模型API查询根节点的性能，适用于大数据量查询。
| 属性名称 | 说明                                                                                                | 是否支持变量绑定 |
|:---|:---|:---|
| 列表大小 | 加载根节点的数据量，默认50条，可根据业务需求调整（如加载所有产线）。                                                               | 是        |
| 查询条件 | 传递给查询根节点API的查询条件。 传递给xDM-F模型API的查询参数（如按工厂ID筛选产线）。 | 是        |
| 过滤条件 | 对API返回数据进行二次筛选（如排除停用设备）。                                                                          | 是        |
| 排序字段 | 对根节点数据排序的字段（如按产线创建时间排序）。                                                                          | 是        |
| 排序方式 | 排序方向（升序/降序）。                                                                                      | 是        |
   
#### 其他
如下属性适用于UI引擎所有组件，用于精细化控制。
| 属性名称   | 说明                                                                                                                                 | 是否支持变量绑定 |
|:---|:---|:---|
| 元素id值  | 对应HTML标签的"id"属性，同一页面内必须唯一。                                                                                                         | 是        |
| 样式类    | 对应HTML标签的"class"属性，为空格分隔的类名列表，用于自定义组件样式。默认为"component-base-style"。                                                                 | 是        |
| ref引用类 | 对应Vue的"ref"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是        |
| 显示连接线  | 控制是否在节点间显示层级连接线，增强树形结构的可读性。 开启后可能影响默认图标显示。                                           | 是        |
   
#### 组件实例属性
组件实例可通过"treeRef"引用访问，提供丰富的动态操作能力。
通过"ref"引用访问组件实例属性：
```
// 在JS面板中访问组件实例
const treeInstance = this.$("ref引用类属性配置的值").treeRef;
```
| 方法名称              | 类型定义                                                                                | 说明                                                        |
|:---|:---|:---|
| addNode           | ``` (node: object) => void ```                                                      | 在指定节点下添加子节点（如新增设备到某产线）。                                   |
| append            | ``` (newData:object, targetNodeOrTargetKey: object | string) => void ```            | 在目标节点的子节点列表顶部追加新节点。                                       |
| expandAllNodes    | ``` (isExpand:boolean) => void ```                                                  | 展开或收起所有节点（如一键展开所有产线下的设备）。                                 |
| getCurrentKey     | ``` () => string ```                                                                | 获取当前选中节点的key（如当前选中的设备ID）。                                 |
| getCurrentNode    | ``` () => data ```                                                                  | 获取当前选中节点的数据（如设备详情），未选中时返回null。                            |
| getNode           | ``` (data: string | object) => node ```                                             | 通过节点key或数据对象获取节点实例。                                       |
| getNodeKey        | ``` (node:object) => number ```                                                     | 获取节点的内部唯一ID。                                              |
| getNodePath       | ``` (key:string) => object[] ```                                                    | 获取从根节点到目标节点的路径。                                           |
| insertAfter       | ``` (newData:object, targetNodeOrTargetKey: object | string) => void ```            | 在目标节点后插入新节点（如在某工序后添加新工序）。                                 |
| insertBefore      | ``` (newData:object, targetNodeOrTargetKey: object | string) => void ```            | 在目标节点前插入新节点。                                              |
| remove            | ``` (targetNodeOrTargetKey: object | string, isSaveChildNode :boolean ) => void ``` | 删除节点，"isSaveChildNode"为"true"时保留子节点并上移至父节点（如删除某产线但保留其设备）。 |
| updateKeyChildren | ``` (key, children: object[]) => void ```                                           | 更新指定节点的所有子节点（如批量更新某产线下的设备列表）。                             |
   
#### 组件支持的事件（非系统内置事件）
模板树组件支持以下事件，用于监听节点交互行为并执行业务逻辑。
| 事件名称           | 事件方法类型                         | 事件参数                                                                                                                                                                                                                                                                                                                                                                                                 | 说明             |
|:---|:---|:---|:---|
| onNodeClick    | ``` (data, node, vm)=>void ``` | - data：节点的数据  - node：节点状态信息（包含数据）  - vm：当前组件实例     | 单击节点时触发的事件。    |
| onLoadData     | ``` (data)=>void ```           | data：加载的数据                                                                                                                                                                                                                                                                                                                                                                                           | 懒加载数据成功时触发的事件。 |
| onNodeCollapse | ``` (data, node, vm)=>void ``` | - data：节点的数据  - node：节点状态信息（包含数据）  - vm：当前组件实例           | 节点收缩时触发的事件。    |
| onNodeExpand   | ``` (data, node, vm)=>void ``` | - data：节点的数据  - node：节点状态信息（包含数据）  - vm：当前组件实例   | 节点展开时触发的事件。    |