Skip to main content
本节介绍 ORION Formio组件中可配置的通用属性,包括其设置方法及具体含义。用户可以通过这些属性控制组件的显示样式、交互逻辑和数据行为,以满足不同业务场景的需求。

通用设置项

Form Setting ORION Formio 组件支持多种通用设置项,涵盖:
  • 显示:控制组件的样式与外观。
  • 数据:定义组件与数据源的交互方式。
  • 校验:配置输入验证规则。
  • 集成:设置与外部系统或 API 的对接(尤其是用ORION引擎中变量的关系)。
  • 条件:根据条件动态调整组件的显示或行为。
  • 逻辑:实现更复杂的业务逻辑与交互控制。
接下来,我们将逐一介绍这些设置项的功能与配置方法。
  • 显示
  • 数据
  • 校验
  • 集成
  • 条件
  • 逻辑
显示设置用于控制组件在表单中的外观与呈现方式,包括标签位置、占位提示、描述信息、样式以及输入显示形式等。通过这些设置,可以优化表单的布局和用户体验。
  • 标签 组件在前端显示的名称。默认情况下,标签位于字段的左上角。
  • 标签位置 定义标签在组件中的显示位置。默认是“顶部”。可选项:顶部 / 左(左对齐)/ 左(右对齐)/ 右(左对齐)/ 右(右对齐)/ 底部。
  • 标签宽度和边距 当选择“左”或“右”标签位置时,可配置标签的宽度和边距,用于控制标签与输入区域之间的间距。宽度和边距值基于字段在表单中所占列宽的百分比。
  • 占位符 在字段为空时显示的简短提示文字,用于说明用户需要输入的内容。占位符不会随表单数据一同提交。
  • 描述 在字段下方显示的说明文字。常用于提供比占位符更详细的说明,或作为占位符的补充。
  • 工具提示 在字段标签旁添加一个问号图标,用户将鼠标悬停其上时,会显示设置的说明文字。适合提供简短的帮助提示,而不占用表单空间。
  • 前缀 在输入字段前显示的文本或符号,例如 $ 表示金额字段。
  • 后缀 在输入字段后显示的文本或符号,例如 % 表示百分比。
  • 自定义 CSS 类 为组件添加自定义样式类,便于结合现有 UI 框架(如 Bootstrap:bg-info)。
  • 标签索引(Tabindex) 设置 HTML 元素的 tabindex 属性,用于控制键盘 Tab 键的聚焦顺序。详情参见 MDN tabindex
  • 自动完成(Autocomplete) 控制输入字段是否启用浏览器的自动完成功能。默认开启,浏览器会根据历史输入自动填充。可设置为 off 来禁用。详情参见 MDN autocomplete
  • 隐藏 隐藏组件,使其在表单界面上不可见,但仍保留在表单 JSON 和提交数据中。适合存放计算值或辅助数据。
  • 隐藏标签 隐藏字段的标签,仅显示输入框。常与占位符或描述配合使用,以节省空间。
  • 隐藏输入 将用户输入以掩码形式显示(例如用圆点 ● 替代),类似密码字段。适合处理敏感信息(如税号、身份证号)。
  • 初始焦点 表单加载时自动聚焦到该组件。如果多个组件都勾选了“初始焦点”,则表单 JSON 中最后一个勾选的组件生效。
  • 禁用 将组件设为不可编辑状态,用户无法输入或修改。常用于显示计算值或填充值,避免被修改。
  • 表视图 勾选后,该字段会在表单的 submission JSON 中以表格形式显示数据,适合列表化展示。
  • 模态编辑 启用后,组件在表单中显示为一个按钮。点击按钮会弹出模态窗口(Modal Window),在窗口中输入或编辑字段数据。