Skip to content

表单配置 ​

表单配置作用于整张表,统一控制标签位置、尺寸、字段序号、提交/重置按钮、校验展示、忽略隐藏字段,以及表单级事件。和单个组件的配置互补:先搭好字段,再用本页收口整体体验。

在哪里找 ​

右侧属性栏切换到 表单配置(也可先点画布空白取消选中组件,再切到表单配置)。

右侧切到表单配置

和组件配置的分工 ​

层级管什么
表单配置(本文)整表默认:标签位置、尺寸、序号、提交/重置、忽略隐藏字段、标签样式、移动端自适应、表单事件
基础配置单个字段的名称、ID、宽度、是否忽略
样式配置单个字段外观;共性可沉淀全局样式

个别字段要覆盖标签布局时,到该字段基础配置里的「配置表单项」。

怎么用(分步) ​

  1. 切到 表单配置 后,先填 表单名称,方便在表单列表里辨认。

填写表单名称

  1. 设置 标签的位置:可选 左对齐 / 右对齐 / 顶部。手机端报名表常用「顶部」,桌面录入常用「左对齐」或「右对齐」。

设置标签的位置

  1. 设置 表单的尺寸:可选 大 / 默认 / 小。触控场景可偏「大」,便于点选。

设置表单的尺寸

  1. 按需要开关 是否显示表单提交按钮、是否显示表单重置按钮。只读详情可都关掉;录入表通常保留提交、按需保留重置。

提交与重置按钮开关

  1. 打开 提交表单时忽略被隐藏的字段,提交时不把当前隐藏的字段带进数据(常与隐藏条件配套)。

提交时忽略被隐藏的字段

  1. 需要给字段标签加顺序号时,在 序号 里选 数字 或 中文,并可设 序号颜色(详见下文「序号」)。

表单配置里的序号

  1. 需要统一标签外观时,展开 标签的样式,可调文字、颜色、背景、边距等(整表字段标签的默认外观)。要做提交确认、打开带数等,点 表单事件(详见表单事件配置)。

标签的样式入口

展开标签样式面板

  1. 面向手机填写时,展开 移动端自适应,单独设窄屏下的 标签的位置、内容的位置、标签的宽度(与桌面默认可不同)。

移动端自适应入口

展开移动端选项

  1. 还可按需调整校验相关开关,例如 隐藏必填字段的标签旁边的红色星号、显示校验错误信息、以行内形式展示校验信息(与验证配置配合)。

校验相关展示开关

推荐顺序

表单名称 → 标签位置 / 尺寸 → 序号(可选)→ 提交与重置 → 忽略隐藏字段 → 标签样式(可选)→ 移动端自适应(可选)→ 表单事件 → 预览整表(含移动端),再回头改个别字段覆盖项。

标签的样式(详解) ​

标签的样式 是可折叠配置项:点左侧标题旁箭头展开后,出现样式面板(外边距、内边距、尺寸、布局、文字、颜色、背景等)。

  • 颜色:改的是各字段标签文字的颜色(画布上标签文字变色;外层标签槽本身可能仍是主题灰,属正常)。
  • 背景:改的是标签区域背景,不要和「颜色」搞混。
  • 桌面 标签的位置 用左对齐 / 右对齐时,文字色更容易一眼看出;顶部对齐同样会生效。

入口见上文「怎么用」步骤 6。展开后:

  1. 在表单配置里展开 标签的样式。

展开标签的样式

  1. 在样式面板中找到 颜色(文字色,不是下面的背景)。

找到颜色配置项

  1. 填入色值或点色板选择(例如 #2196f3)。

将标签文字色设为强调色

  1. 看画布:各字段标签文字应统一变成所选颜色。

画布标签文字已统一变色

个别字段若还要覆盖,到该字段的样式配置里再改。

序号(详解) ​

序号 会在每个字段标签前自动加顺序号,方便问卷、登记表按题号填写。在 表单配置 里找到 序号(在标签宽度附近)。

选项画布效果(示意)
(不选 / 清空)标签不加序号
数字1. 2. 3. …
中文一、二、三、 …

选中 数字 或 中文 后,下方出现 序号颜色,可单独改序号色(不影响标签正文色;标签正文仍用 标签的样式 → 颜色)。

怎么配 ​

  1. 切到 表单配置,找到 序号,选 数字 或 中文。

选择序号类型

  1. 看画布:各字段标签前应出现递增序号。

数字序号效果

  1. 需要时在 序号颜色 里设强调色(如 #2196f3)。

设置序号颜色

  1. 若要中文题号,把 序号 改成 中文。

中文序号效果

清空序号

在 序号 下拉里清空(清除已选项),序号与 序号颜色 配置会一并去掉,标签恢复不加号。

移动端自适应(详解) ​

移动端自适应 只影响窄屏 / 移动端预览与运行时布局,不改掉桌面上的 标签的位置 等默认项。

展开后常见三项(界面文案):

配置作用
标签的位置移动端标签对齐(选项多为 left / right / top / center,以下拉为准)
内容的位置移动端输入内容对齐(left / center / right)
标签的宽度移动端标签宽度(单位与界面一致,多为 px)

入口见上文「怎么用」步骤 7。展开后:

  1. 按需选择移动端 标签的位置(手机报名表常用 top)。

选择移动端标签位置

  1. 需要时再设 内容的位置、标签的宽度。

移动端标签宽度

  1. 用预览切到 移动端 核对效果。

预览核对移动端效果

其它常用项(对照界面) ​

配置(界面文案)作用
Class给整表挂样式类,可配合全局样式
标签的后缀标签后统一后缀(如冒号)
标签的宽度桌面端左侧/右侧标签时的宽度(px);移动端宽度见上文「移动端自适应」
序号标签前自动加 数字 或 中文 题号;可选 序号颜色(见上文「序号」)
表单项的下边距字段之间的竖直间距
地图组件 API Key使用地图类组件时填写

场景示例 ​

入门:手机端报名表 ​

背景:活动报名主要在手机上填,标签放上面更好扫,控件稍大更好点;只要提交、不要重置。

步骤:

  1. 在表单配置里把 标签的位置 设为 顶部,表单的尺寸 设为 大。

报名表设为顶部标签和大尺寸

  1. 打开 是否显示表单提交按钮,关闭 是否显示表单重置按钮。

报名表显示提交关闭重置

  1. 预览:标签应在字段上方,底部有提交、没有重置。

预览手机向报名表

预期:窄屏下标签与输入更易扫读;误触重置的机会更少。字段尽量一列,短字段再用半宽。

常用:详情只读页 ​

背景:审批详情只看不改,不需要提交/重置;若表里还有按条件隐藏的字段,提交链路(若仍存在)可忽略隐藏项。

步骤:

  1. 关闭 是否显示表单提交按钮 与 是否显示表单重置按钮。

只读页关闭提交和重置

  1. 按需打开 提交表单时忽略被隐藏的字段。

只读或分支场景打开忽略隐藏字段

  1. 预览:底部不应再出现表单自带的提交/重置。

预览无提交重置的只读页

预期:关键字段可再配禁用条件或只读,避免误改。只读页与录入页最好用两套模板或明确开关。

常用:带二次确认的申请单 ​

标签用左/右对齐、显示提交 → 在 设置事件 里为「提交时」加确认框(见表单事件配置);金额过大时再配合字段级必填条件要附件。

常用:多表统一外观 ​

表单尺寸、标签宽度先在本页定默认;品牌色按钮与危险操作样式放到全局样式,各表通过 Class 引用。

常用:手机报名再开移动端自适应 ​

背景:桌面用左对齐标签方便录入,手机上希望标签在上方、更好扫读。

步骤:

  1. 桌面 标签的位置 保持左/右对齐;展开 移动端自适应。

场景配移动端自适应

  1. 将移动端 标签的位置 设为 top,按需设内容对齐与标签宽度。

场景设置移动端选项

  1. 预览 → 移动端,确认窄屏标签在字段上方。

场景预览移动端

预期:同一张表桌面与手机可用两套标签布局,互不覆盖。

常用:整表标签统一成强调色 ​

背景:会议室预约等表希望所有字段标签用同一强调色,方便扫读。

步骤:

  1. 展开 标签的样式,在 颜色 中设好强调色(如 #2196f3)。

场景展开并设置标签颜色

  1. 看画布:各字段标签文字应已统一成该色。

场景画布标签已统一强调色

预期:未单独覆盖样式的字段,标签文字外观一致;个别字段仍可在组件样式里覆盖。

常用:问卷题号用数字序号 ​

背景:满意度调查、入职登记等希望每题带 1. 2. 3.,序号颜色与品牌强调色一致。

步骤:

  1. 在表单配置将 序号 设为 数字,并设置 序号颜色。

场景:数字序号与颜色

  1. 若更习惯中文题号,改为 中文。

场景:中文序号

预期:画布与预览中每个字段标签前按顺序显示题号;清空 序号 后题号消失。

注意点 ​

  • 先定整表默认,再对个别字段做覆盖,避免每个字段手调标签宽度。
  • 序号 是整表开关:按字段在表单中的展示顺序递增;隐藏字段是否占号以实际预览为准。
  • 序号颜色 只改题号色,标签文字色仍走 标签的样式。
  • 「提交表单时忽略被隐藏的字段」会影响提交数据,改完务必预览提交结果。
  • 移动端自适应 与桌面「标签的位置 / 宽度」相互独立;改完请用预览的移动端核对。
  • 标签的样式 是整表默认(颜色改标签文字色);字段级样式会覆盖它。外层标签槽仍可能是主题灰,属正常。
  • 只读页与录入页最好分开模板或明确开关,避免误提交。
  • 表单事件管整表时机;字段点击、变更请用组件事件。

相关阅读 ​

相关技术文档 ​