# 设置UI引擎前端页面数据源表单组件属性 数据源表单是UI引擎基于"数据源"功能封装的高效表单组件，支持根据选定的数据源自动生成对应表单项，无需手动配置单个表单元素，大幅提升表单开发效率。 以下为该组件的完整属性配置流程及说明。 #### 前提条件 - 已在当前页面添加"数据源表单"组件，具体操作请参见[为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_0000002535311521.png)，即可展开"属性"设置面板。 #### 模型属性 此部分的属性用于定义表单的数据源类型及数据规则，是组件生效的关键。 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 数据源来源 | 定义表单数据的获取方式。 - API：调用"数据源管理"中已配置的API，动态获取数据。适用于字段需从后端实时加载的场景。 - JSON：手动输入静态的JSON数据作为数据源。适用于字段固定或快速原型设计的场景。 具体配置请参见[数据源配置]。 | 否 | | 配置项数据 | 根据所选模式展示具体配置内容： - API模式：自动关联所选数据源、API及字段集合，无需手动输入。 - JSON模式：手动输入JSON格式的数据源数据。 | 否 | #### 数据源配置 单击"数据源来源"右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002534908255.png)，在弹出的窗口中，根据选择的"数据源来源"（API/JSON）完成对应参数配置。 | 参数名称 | 说明 | |:---|:---| | 数据源来源 | 选择"API"或"JSON"，决定表单的数据来源类型。 | - "数据源来源"为"API"的配置项： | 参数名称 | 说明 | |:---|:---| | 选择数据源 | 选择需要配置的数据源。 如果没有可选择的数据源，可单击右侧的"新增"，前往"数据源管理"进行创建，具体操作请参见[为UI引擎前端项目创建数据源](https://support.huaweicloud.com/usermanual-idme/idme_ui_0107.html)。 | | 选择API | 选择指定数据源后，进一步指定具体的API。 | | 选择集合 | 选择指定API后，系统列出其返回的数据集合。选择其一以生成字段列表（默认选中第一个非空集合）。 | | 字段列表 | 展示所选集合的所有字段，可配置每个字段是否展示及其对应的表单项类型。 | - "数据源来源"为"JSON"的配置项： | 参数名称 | 说明 | |:---|:---| | 展示字段映射值 | 用于指定从JSON对象中读取哪个属性作为表单项的标签文本。 如未配置，默认读取JSON对象中的"label"属性。 | | prop关键字映射值 | 用于指定从JSON对象中读取哪个属性作为表单项的字段名称（key）。 如未配置，默认读取JSON对象中的"prop"属性。 | | 类型映射值 | 用于指定从JSON对象中读取哪个属性来定义组件的类型。 如未配置，默认使用"componentType"属性。"componentType"可选值： - INPUT（输入框） - SELECT（下拉框） - RADIOGROUP（单选框组） - CHECKBOX（复选框） - CHECKBOXGROUP（复选框组） - DATEPICKER（日期选择器） - TIMEPICKER（时间选择器） - NUMERIC（数字输入框） - FLUENTEDITOR（富文本） - POPEDITOR（弹出编辑） - FILEUPLOAD（文件上传） - USERSELECTOR（选人组件） **注意：**该属性仅适用于表单组件的类型映射。如当前配置为数据源表格，则此属性的值将被忽略。 | | 输入JSON数据 | 用于配置生成表单项的JSON数组。每个数组元素（对象）代表一个表单项，需包含以下三个关键属性： - 展示字段映射值：定义表单项的标签文本（如"label"）。 - prop关键字映射值：定义表单项的字段名称（key，如"prop"）。 - 类型映射值：定义表单项的组件类型（如"componentType"）。 示例： ``` [ { "label": "姓名", "prop": "name", "componentType": "INPUT" } ] ``` 用户输入JSON数组后，可通过输入框底部的功能按钮完成以下操作： - 点击格式化：对输入的JSON数据进行格式化，提升可读性。 - 点击生成字段列表：根据输入的JSON数据，解析并生成对应的字段列表。 | | 字段列表 | 用于展示JSON数据生成的字段列表，可以配置字段是否显示与字段对应的组件类型。 | #### 基础信息 此部分的属性用于配置表单的展示样式和交互状态，支持部分属性的变量绑定。 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 组件名称 | 仅用于展示，显示组件的中文名称，不可编辑。 | 否 | | 添加表单项 | 选定数据源后，手动新增自定义表单项，补充数据源未覆盖的字段。 | 否 | | 表单仅展示 | 控制表单内容是否为只读状态。开启后所有表单项不可编辑。 | 是 | | 禁用 | 控制整个表单是否禁用。开启后表单内所有元素同步禁用。 | 是 | | 标签位置 | 配置表单项标签的显示位置，可选："左边"、"右边"、"上边"。 | 是 | | 标签宽度 | 统一设置所有表单项标签的文本宽度，单位为"px"。 | 是 | | 表单列数 | 设置表单的列布局数量，可选范围为1-5。默认值为2。 | 否 | | 列间距 | 表单列数大于1时生效，设置列与列之间的间距。单位为"px"，默认值为10。 | 否 | | 行间距 | 表单行数大于1时生效，设置行与行之间的间距。单位为"px"，默认值为0。 | 否 | #### 其他 如下属性适用于UI引擎所有组件，用于精细化控制。 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 元素id值 | 对应HTML标签的"id"属性，同一页面内必须唯一。 | 是 | | 样式类 | 对应HTML标签的"class"属性，为空格分隔的类名列表，用于自定义组件样式。默认为"component-base-style"。 | 是 | | ref引用类 | 对应Vue的"ref"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是 | #### 组件事件 数据源表单组件内置核心事件，用于监听表单数据变化： | 事件名称 | 类型定义 | 说明 | |:---|:---|:---| | onUpdate:modelValue | ``` (...args) => void ``` | 表单内置数据对象的值发生改变时触发，可用于监听表单数据变化并执行联动逻辑。 | | onClick | ``` (...args: any) => void ``` | 组件被单击时触发。 优先使用组件提供的参数，如果没有，则传递浏览器的"MouseEvent"事件参数，适用于按钮、卡片等可单击组件。 | | onChange | ``` (...args: any) => void ``` | 组件值发生变化时触发。 仅部分组件支持此事件，具体参数由组件实现决定。适用于输入框、下拉选择器等表单组件。 | | onFocus | ``` (e: Event) => void ``` | 元素获得焦点时触发。 传递标准的浏览器"Event"或"MouseEvent"对象，适用于输入框等表单元素。 | | onMousemove | ``` (e: Event) => void ``` | 鼠标在组件区域内移动时触发。 实时追踪鼠标在组件区域内的移动轨迹，兼容所有可视化组件，适用于拖拽、悬浮提示、轨迹追踪等场景。 | #### 组件实例属性 组件实例属性可通过"ref"引用获取，用于读取表单的核心数据状态： | 属性名称 | 类型 | 说明 | |:---|:---|:---| | formData | object | 表单数据对象，采用标准"key-value"格式存储。 | | dsFormData | object | 基于数据源配置的表单数据对象，可能包含层级结构（与数据源字段对应）。 | | ref | ComponentRef | 底层表单组件（TinyForm）的转接引用，可调用TinyForm实例的原生方法。 | #### 组件实例方法 组件实例方法可通过"ref"调用，用于实现表单数据的主动操作和联动控制： | 方法名称 | 类型定义 | 说明 | |:---|:---|:---| | getDsData | ``` () => object<{ body: object; custom: object; mappedData: object; methodType: string; query: object; url: string; }> ``` | 获取数据源的完整数据对象，包含： - body：接口请求体参数。 - custom：手动添加表单项的数据存储对象。 - mappedData：映射为接口请求参数的表单数据。 - methodType：HTTP请求方法（如GET、POST）。 - query：接口URL拼接的查询参数。 - url：接口请求地址。 | | updateFormField | ``` (key: string, originKey: string, value: any) => void ``` | 手动更新指定表单项的值，适用于表单项之间的数据联动。 - key：目标表单项的标识。 - originKey：表单项对应的原始数据源标识。 - value：待更新的目标值。 |