设置物料插件的“表单”组件属性

选择模型

单击输入框，在弹出的“模型”窗口选择数据模型，单击“确认”。

如果没有可选择的数据模型，请在数据编辑页面添加数据模型。

×

组件名

表单组件的名称，默认为“表单”，不可修改。

×

rel引用类

表单组件的ID，系统自动生成，且不可修改。

×

Style

配置表单组件样式，支持通过CSS代码自定义表单组件的样式。

√

表单布局

用于设置“表单”组件的排列方式，以便更高效、清晰地展示和收集用户信息。目前支持以下三种布局方式，默认采用 “二列布局”。

• 一列布局：将表单元素从上到下依次排列在单一列中。适用于表单字段数量较少，或者字段之间逻辑联系紧密、需要用户按顺序依次处理的情况。
• 二列布局：将表单元素分为左右两列进行排列。适用于表单字段数量适中，且字段可以合理分组的情况。例如，将相关的个人信息字段放在一列，联系方式字段放在另一列，有助于用户对表单内容进行分类和理解。
• 三列布局：将表单元素分布在三列中。适用于表单字段较多且较为复杂的场景，例如一些需要收集大量详细信息的注册表单、调查问卷等。

×

只读

您可以根据实际业务需求设置表单为只读状态，避免数据被误修改。

×

绑定数据

支持通过JSON格式自定义设置，从而精准地让表单组件与所需的数据进行绑定，以满足多样化的业务需求。

√

更多选项类型

在设置“表单”组件属性过程中，可以通过“更多选项类型”配置，以满足特定需求。

• 批量显示/隐藏：用于控制模型的全部属性字段（表单项）的整体可见性，实现一键显示或隐藏。
• ：当存在多个表单项时，长按此图标并上下拖动，调整模型属性的排列排序。
• /：单独控制某一个表单项的可见状态，灵活满足不同场景下的展示需求。
• ：允许用户修改某个表单项的具体内容，以适应更细致的定制化要求。
  • 表单项标签：表单项的名称，默认为所指定模型中对应属性的中文名称。
  • 字段名：表示数据传输和存储时的标识字段，系统自动生成，且不可修改。
  • 是否渲染：可按需自主决定表单项是否在界面中展示。开启渲染时，表单项将呈现于页面供用户操作；关闭渲染后，该表单项仅在数据层面生效，不显示于用户界面，适用于特定的后台数据处理场景。
  • 必填：支持根据业务规则，灵活设定表单项是否为必填项。开启必填后，用户提交表单时，如果该表单项未填写内容，系统将提示用户补全，以保障数据完整性和业务流程的顺利推进。
  • 校验规则：允许按照业务逻辑与数据规范，定制多样化的校验规则。涵盖数据格式校验（如日期格式、邮箱格式等）、长度限制校验、数值范围校验等，严格把控用户输入数据质量，有效降低数据错误率。
  • 输入类型：支持多种输入方式，包括：输入框、选人组件、选择器、文本、多选框、单选框、按钮、时间选择器、日期选择器和xdm树形选择框。您可以根据业务特性与数据录入需求，精准挑选适配的输入类型，提升表单交互的便捷性与用户体验。
  • 默认值：当您将“输入类型”设置为“输入框”、“选人组件”、“选择器”、“多选框”、“单选框”、“时间选择器”或“日期选择器”时，可以根据实际业务需求为该表单项设定一个初始默认值。在用户首次访问表单时，系统会自动填充此预设值，从而提高用户体验并简化数据录入流程。
  • 类型：当您将“输入类型”设置为“输入框”时，可以根据实际业务需求进行自定义设置。默认情况下，该表单项的类型会与指定模型中对应属性的数据库字段类型保持一致。此外，还支持将其设置为文本框或文本域，以满足不同的输入需求。
  • 数据标识字段：当您将“输入类型”设置为“选择器”时，可以根据实际业务需求自定义设置数据标识字段。数据标识字段用于唯一标识选项数据，确保在下拉列表中每个选项都能被准确识别和区分。通过合理配置，可以更好地匹配后台数据源，提升表单的数据处理能力和用户体验。
  • 数据展示字段：当您将“输入类型”设置为“选择器”时，可以根据实际业务需求自定义该字段的显示内容。
  • 占位符：当您将“输入类型”设置为“输入框”、“选人组件”、“选择器”、“时间选择器”或“日期选择器”时，可以根据实际业务需求设置表单项输入框的提示文本。
  • 最大长度：当您将“输入类型”设置为“输入框”时，可以根据实际业务需求设置输入文本的最大长度。
  • 多选：当您将“输入类型”设置为“选人组件”或“选择器”时，可以根据实际业务需求启用或关闭此功能。
  • 最大选中人员数：当您将“输入类型”设置为“选人组件”且开启“多选”功能后，可以根据实际业务需求自定义允许选中的最大人员数量。
  • 文本内容：当您将“输入类型”设置为“文本”时，可通过JSON格式自定义设置输入框的提示文本或默认值。
  • 文本宽度：当您将“输入类型”设置为“文本”时，可以根据实际业务需求进行自定义设置输入框的宽度，以适应不同的布局要求和用户体验。
  • 启用超链接：当您将“输入类型”设置为“文本”时，可以根据实际业务需求自定义设置是否启用此功能。
  • 超链接地址：开启“启用超链接”后，可以根据实际业务需求自定义设置超链接的目标地址。
  • 超链接新开页面：开启“启用超链接”后，可以根据实际业务需求设置超链接点击后在新窗口打开或当前窗口跳转。
  • 超链接变量：开启“启用超链接”后，可以根据实际业务需求进行自定义设置链接变量，以便传递特定数据。
    • 链接变量名：用于标识链接变量的自定义名称，便于区分和管理不同的链接变量。
    • 链接变量值：对应链接变量实际携带的数据内容，在业务场景中起到关键作用的信息。
  • 自定义超链接地址：开启“启用超链接”后，可通过JSON格式自定义设置复杂的链接地址规则。
  • 点击响应函数：开启“启用超链接”后，可通过JSON格式自定义设置链接点击后的响应行为，如数据提交、页面刷新等操作。
  • 选项数据：当您将“输入类型”设置为“选择器”时，支持通过JSON格式进行自定义选项内容、顺序及关联属性，满足多样化业务场景需求。
  • 选项：当您将“输入类型”设置为“多选框”或“单选框”时，可以根据实际业务需求，单击为多选框或单选框组件添加多个选项。添加完成后，您可以在展开的选项列表中进行详细配置。针对单选框，仅需设置“数据标识”和“数据展示”配置项。
    • 数据标识：选项的ID，用于唯一地识别和区分每个选项。支持选择文本、数字和布尔。
    • 数据展示：表示用户在页面所看到的内容。
    • 启用提示：通过/控制当前选项是否启用提示功能。

      提示功能启用后，页面将显示提示图标（）。同时，您还需要进一步配置“提示内容”以及“提示位置与对齐方式”，系统将根据配置在页面交互触发时，按预设规则展示提示信息。

    • 提示内容：启用提示功能后，您可以自定义输入具体的提示语（如功能说明、操作指引等）。当鼠标悬停于目标组件时，系统将渲染此预设内容。
    • 提示位置与对齐方式：启用提示功能后，您可以配置提示语的展示位置及对齐方式。支持以下多种定位方式：
      图1 提示位置与对齐方式
      

      居中对齐：包括上方、右方、下方、左方，提示语与目标组件对应方向保持居中对齐。例如“上方”指提示语居中显示于目标组件正上方，且与组件居中对齐。

      按方向对齐：包括上左、上右、右上、右下、下左、下右、左上、左下，组合中的第一个方向表示提示语相对于目标组件的方位（如：上、下、左、右），第二个方向表示提示语与目标组件的对齐边缘（如左边缘对齐、右边缘对齐）。例如，“上左”指提示语定位于目标组件上方，且与组件的左边缘对齐；“右下”指提示语定位于目标组件右方，且与组件的下边缘对齐。

      如果指定位置所占区域超出画布或上层组件有效显示区域，系统将自动调整至其他有效区域展示，以确保提示内容完整可见。

  • 按钮名称：当您将“输入类型”设置为“按钮”时，可以根据实际业务需求灵活自定义按钮的显示名称。
  • 按钮类型：当您将“输入类型”设置为“按钮”时，默认类型为STRING。同时，系统提供丰富的样式选项，包括：主要（用于突出核心操作，视觉上更醒目）、文本（简洁无过多修饰，适用于常规辅助操作）、告警（以醒目的颜色提示潜在风险操作）、提示（用于信息引导类操作）、成功（展示操作完成的积极反馈）、危险（警示可能产生严重后果的操作） 。您可根据按钮的功能属性和业务场景，选择适配的类型，优化界面视觉效果与用户交互体验。
  • 禁用：当您将“输入类型”设置为“输入框”、“选人组件”、“选择器”、“多选框”、“单选框”、“按钮”、“时间选择器”或“日期选择器”时，可以根据实际业务需求开启或关闭此功能，实现对表单项操作权限的灵活管控。
  • 只读：当您将“输入类型”设置为“输入框”、“时间选择器”或“日期选择器”时，可以根据实际业务需求设置表单项为只读状态，避免数据被误修改。
  • 校验提示内容：当您将“输入类型”设置为“选人组件”时，可以根据实际业务需求自定义校验失败时的提示信息，便于用户快速修正操作。
  • 时间显示格式：当您将“输入类型”设置为“时间选择器”时，可以根据实际业务需求选择以下时间显示样式：小时、分钟、秒、小时:分钟、分钟:秒、小时:分钟:秒、AM/PM 小时、AM/PM 小时:分钟、AM/PM 小时:分钟:秒。
  • 日期类型：当您将“输入类型”设置为“日期选择器”时，可以根据实际业务需求选择不同的日期选择器类型。可选类型包括：年、月、日、周、日期时间、多日期、日期时间范围、日期范围、月份范围、年份范围。
  • 日期显示格式：当您将“输入类型”设置为“日期选择器”时，可以根据实际业务需求自定义日期显示格式。支持的格式包括：年、月、日、年-月、年-月-日、年-月-日 小时:分钟、年-月-日 小时:分钟:秒。
  • 面板对齐方式：当您将“输入类型”设置为“时间选择器”或“日期选择器”时，可以根据实际业务需求调整面板的对齐方式。支持的对齐方式包括：左对齐、居中对齐和右对齐。
  • 默认日期：当您将“输入类型”设置为“日期选择器”时，可以根据业务流程与用户使用习惯，自定义默认显示的日期，减少用户手动输入操作，提升数据录入效率。
  • 默认时间：当您将“输入类型”设置为“时间选择器”时，可以根据实际业务需求设置默认显示的时间，使初始界面更贴合用户使用预期，简化操作流程。
  • 启用范围选择：当您将“输入类型”设置为“时间选择器”时，可以根据实际业务需求开启或关闭此功能。
  • 可选时间段：在未开启“启用范围选择”的情况下，您可以根据实际业务需求自定义单个时间选择的可选时段，精准限定时间选择范围。
  • 开启占位符：开启“启用范围选择”后，可以根据实际业务需求自定义时间范围起始端的占位提示文本。
  • 结束占位符：开启“启用范围选择”后，可以根据实际业务需求设置时间范围结束端的占位提示内容，引导用户准确输入。
  • 分隔符：开启“启用范围选择”后，可以根据实际业务需求自定义设置时间范围之间的分隔符，如 “-”、“至”等。
  • 数据传递格式：当您将“输入类型”设置为“时间选择器”或“日期选择器”时，可以根据实际业务需求，定义数据的传输格式，确保数据与系统或其他模块的兼容性。
    • “时间选择器”格式：当使用“时间选择器”时，支持的选择方式包括：小时、分钟、秒、小时:分钟、分钟:秒、小时:分钟:秒、AM/PM 小时、AM/PM 小时:分钟、AM/PM 小时:分钟:秒，满足不同时间记录与展示需求。
    • “日期选择器”格式：当使用“日期选择器”时，支持的选择方式包括：年、月、日、年-月、年-月-日、年-月-日 小时:分钟、年-月-日 小时:分钟:秒，适配各类业务场景下的日期数据录入与显示要求。
  • 禁用日期：当您将“输入类型”设置为“日期选择器”时，可以根据实际业务需求自定义禁止选择的日期范围，避免无效或冲突的日期输入。
  • 快捷项：当您将“输入类型”设置为“日期选择器”时，可以根据实际业务需求，单击，灵活添加多个日期快捷选项，方便用户快速选择常用日期。
    • 文本：自定义快捷项显示的文本内容，确保其清晰、准确地传达对应日期含义。
    • 点击回调事件：支持通过JavaScript进行个性化设置，当用户点击快捷项时，可触发特定逻辑，如数据提交、页面跳转、动态更新等，实现与业务流程的深度交互。

√

是否渲染

在页面开发中，可能需要根据某些条件来动态显示或隐藏页面中的组件内容，您可以设置此配置项。

• ：关闭渲染。
• ：开启渲染。

√

循环数据

表示需要循环渲染的数组。当页面存在若干份重复且动态生成的内容时，您可以在高级面板中自定义循环数据。

√

迭代变量名

在循环渲染子项对应的变量名，默认为item。

×

索引变量名

循环渲染的索引变量名，默认为index。

×

key

用于标识每个循环项的唯一键值，默认为index。建议根据实际需求选择一个更合适的字段作为唯一标识符，以提高性能和避免潜在问题。

×