设置UI引擎前端页面模板树组件属性

模板树是UI引擎基于xDM-F数据模型开发的树形结构组件，适用于工业场景中设备层级展示、工艺流程可视化、物料清单管理等需求，可通过API动态加载数据或绑定本地数据源，支持节点懒加载、自定义渲染及复杂交互操作。

前提条件

已在当前页面添加“模板树”组件，具体操作请参见为UI引擎前端页面添加物料组件。
已创建数据源，具体操作请参见为UI引擎前端项目创建数据源。

配置入口

在页面设计器的中心画布区，单击选中“模板树”组件。
在右侧设置面板中，单击，即可展开“属性”设置面板。

模型信息

此部分配置用于绑定xDM-F数据模型，确保树形数据与业务系统的数据源对接。

属性名称	说明	是否支持变量绑定
xdm模型	用于为树形结构绑定xDM-F数据模型，从而实现树形数据与业务系统数据源的无缝对接。配置步骤：单击“选择模型”，弹出“绑定数据模型”窗口。在弹出的窗口中，依次完成以下选择：选择xDM-F模型服务：从下拉列表中选择已在“数据源管理”中创建的xDM-F模型服务。如果列表为空，请先前往“数据源管理”创建，具体操作请参见为UI引擎前端项目创建数据源。选择租户：根据所选的xDM-F模型服务，选择其应用运行态下的目标租户。选择目标数据模型：根据所选租户，从其可用模型列表中选择需要绑定的数据模型。单击“确认”，完成绑定。该模型将作为树形结构的数据源基础。	否

属性名称

说明

是否支持变量绑定

xdm模型

用于为树形结构绑定xDM-F数据模型，从而实现树形数据与业务系统数据源的无缝对接。配置步骤：

单击“选择模型”，弹出“绑定数据模型”窗口。
在弹出的窗口中，依次完成以下选择：
- 选择xDM-F模型服务：从下拉列表中选择已在“数据源管理”中创建的xDM-F模型服务。
  如果列表为空，请先前往“数据源管理”创建，具体操作请参见为UI引擎前端项目创建数据源。
- 选择租户：根据所选的xDM-F模型服务，选择其应用运行态下的目标租户。
- 选择目标数据模型：根据所选租户，从其可用模型列表中选择需要绑定的数据模型。
单击“确认”，完成绑定。该模型将作为树形结构的数据源基础。

否

基础信息

此部分配置用于配置模板树的展示样式、数据加载方式及交互行为，满足用户的个性化需求。

属性名称	说明	是否支持变量绑定
数据源	树组件的原始数据。可通过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：当前组件实例	节点展开时触发的事件。