设置UI引擎前端页面模板树组件属性
模板树是UI引擎基于xDM-F数据模型开发的树形结构组件，适用于工业场景中设备层级展示、工艺流程可视化、物料清单管理等需求，可通过API动态加载数据或绑定本地数据源，支持节点懒加载、自定义渲染及复杂交互操作。
前提条件
- 已在当前页面添加“模板树”组件，具体操作请参见为UI引擎前端页面添加物料组件。
- 已创建数据源，具体操作请参见为UI引擎前端项目创建数据源。
配置入口
- 在页面设计器的中心画布区，单击选中“模板树”组件。
- 在右侧设置面板中，单击
，即可展开“属性”设置面板。
模型信息
此部分配置用于绑定xDM-F数据模型，确保树形数据与业务系统的数据源对接。
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
xdm模型 |
用于为树形结构绑定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 |
|
单击节点时触发的事件。 |
|
onLoadData |
(data)=>void |
data：加载的数据 |
懒加载数据成功时触发的事件。 |
|
onNodeCollapse |
(data, node, vm)=>void |
|
节点收缩时触发的事件。 |
|
onNodeExpand |
(data, node, vm)=>void |
|
节点展开时触发的事件。 |
