设置UI引擎前端页面弹出编辑组件属性
弹出编辑组件适用于弹窗面板选择数据的场景（如设备参数选择、工单信息选取、物料编码匹配等），替代手动输入方式，确保数据录入的准确性和规范性。
前提条件
已在当前页面添加“弹出编辑”组件，具体操作请参见为UI引擎前端页面添加物料组件。
配置入口
- 在页面设计器的中心画布区，单击选中“弹出编辑”组件。
- 在右侧设置面板中，单击
，即可展开“属性”设置面板。
基础信息
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
绑定值 |
组件的双向绑定值，存储从弹窗面板中选中的数据，是组件提交给表单/业务逻辑的核心值。 |
是 |
|
占位文本 |
未选择数据时，组件输入区域显示的提示文本（如“请选择设备编号”），适配工业场景数据选择引导需求。 |
是 |
|
清除按钮 |
是否在组件右侧显示清除按钮。开启后可一键清空已选中的数据，提升快速重置选择的效率。 |
是 |
|
禁用 |
控制组件是否处于禁用状态。禁用后无法点击组件打开弹窗、无法修改已选数据。 |
是 |
|
文本字段 |
组件界面展示给用户的文本对应的字段名称（如表格数据中“deviceName”字段为设备名称，配置此字段后组件显示该字段值）。 |
是 |
|
值字段 |
组件实际绑定/传递的数值对应的字段名称（如表格数据中“deviceId”字段为设备唯一标识，配置此字段后绑定值为该字段值），保证数据传递的准确性。 |
是 |
弹框面板
弹框面板是组件核心交互区域，用于展示可选数据列表。
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
宽度 |
弹框非遮罩层内容容器的宽度，单位为像素（px）。 |
是 |
|
面板表格配置 |
弹窗内表格的核心配置项，为JSON对象格式，必须包含两个属性：
|
是 |
|
过滤条件 |
设置弹窗面板内的表单查询项，用于快速筛选表格数据（如按设备类型、工单状态过滤），适配海量数据检索需求。 |
是 |
|
启用分页 |
是否显示表格分页器。 开启后支持分页展示数据。需配合组件的分页切换事件（onPageChange）使用。 |
是 |
|
分页配置 |
设置分页器的具体配置项。配置规则请参见设置UI引擎前端页面分页组件属性。 |
是 |
|
多选 |
弹窗表格是否启用多选模式。
|
是 |
其他
如下属性适用于UI引擎所有组件，用于精细化控制。
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
元素id值 |
对应HTML标签的“id”属性，同一页面内必须唯一。 |
是 |
|
样式类 |
对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。 |
是 |
|
ref引用类 |
对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。 如果为“数据源表单”组件，会自动填充默认值。 |
是 |
组件事件
|
事件名称 |
类型定义 |
说明 |
|---|---|---|
|
onChange |
(index: Number, selectedData: Object) => void |
选中数据变更时触发：
|
|
onUpdate:modelValue |
(data: Object) => void |
双向绑定值更新时触发，参数为即将更新的绑定值（值字段对应的内容）。 |
|
onClose |
() => void |
弹窗面板关闭时触发，可用于执行关闭后的收尾逻辑（如数据校验）。 |
|
onPageChange |
(page: Number) => void |
弹窗表格分页切换时触发，参数为切换后的页码，需配合分页配置实现数据加载。 |
|
onClick |
(e: MouseEvent) => void |
组件被单击时触发（未禁用状态下），为原生浏览器事件。 |
|
onFocus |
(e: MouseEvent) => void |
组件获得焦点时触发，为原生浏览器事件。 |
|
onMousemove |
(e: MouseEvent) => void |
鼠标在组件区域移动时触发，为原生浏览器事件。 |
