表单配置
表单配置作用于整张表,统一控制标签位置、尺寸、字段序号、提交/重置按钮、校验展示、忽略隐藏字段,以及表单级事件。和单个组件的配置互补:先搭好字段,再用本页收口整体体验。
在哪里找
右侧属性栏切换到 表单配置(也可先点画布空白取消选中组件,再切到表单配置)。

和组件配置的分工
| 层级 | 管什么 |
|---|---|
| 表单配置(本文) | 整表默认:标签位置、尺寸、序号、提交/重置、忽略隐藏字段、标签样式、移动端自适应、表单事件 |
| 基础配置 | 单个字段的名称、ID、宽度、是否忽略 |
| 样式配置 | 单个字段外观;共性可沉淀全局样式 |
个别字段要覆盖标签布局时,到该字段基础配置里的「配置表单项」。
怎么用(分步)
- 切到 表单配置 后,先填 表单名称,方便在表单列表里辨认。

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

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

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

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

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

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


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


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

推荐顺序
表单名称 → 标签位置 / 尺寸 → 序号(可选)→ 提交与重置 → 忽略隐藏字段 → 标签样式(可选)→ 移动端自适应(可选)→ 表单事件 → 预览整表(含移动端),再回头改个别字段覆盖项。
标签的样式(详解)
标签的样式 是可折叠配置项:点左侧标题旁箭头展开后,出现样式面板(外边距、内边距、尺寸、布局、文字、颜色、背景等)。
- 颜色:改的是各字段标签文字的颜色(画布上标签文字变色;外层标签槽本身可能仍是主题灰,属正常)。
- 背景:改的是标签区域背景,不要和「颜色」搞混。
- 桌面 标签的位置 用左对齐 / 右对齐时,文字色更容易一眼看出;顶部对齐同样会生效。
入口见上文「怎么用」步骤 6。展开后:
- 在表单配置里展开 标签的样式。

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

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

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

个别字段若还要覆盖,到该字段的样式配置里再改。
序号(详解)
序号 会在每个字段标签前自动加顺序号,方便问卷、登记表按题号填写。在 表单配置 里找到 序号(在标签宽度附近)。
| 选项 | 画布效果(示意) |
|---|---|
| (不选 / 清空) | 标签不加序号 |
| 数字 | 1. 2. 3. … |
| 中文 | 一、二、三、 … |
选中 数字 或 中文 后,下方出现 序号颜色,可单独改序号色(不影响标签正文色;标签正文仍用 标签的样式 → 颜色)。
怎么配
- 切到 表单配置,找到 序号,选 数字 或 中文。

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

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

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

清空序号
在 序号 下拉里清空(清除已选项),序号与 序号颜色 配置会一并去掉,标签恢复不加号。
移动端自适应(详解)
移动端自适应 只影响窄屏 / 移动端预览与运行时布局,不改掉桌面上的 标签的位置 等默认项。
展开后常见三项(界面文案):
| 配置 | 作用 |
|---|---|
| 标签的位置 | 移动端标签对齐(选项多为 left / right / top / center,以下拉为准) |
| 内容的位置 | 移动端输入内容对齐(left / center / right) |
| 标签的宽度 | 移动端标签宽度(单位与界面一致,多为 px) |
入口见上文「怎么用」步骤 7。展开后:
- 按需选择移动端 标签的位置(手机报名表常用
top)。

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

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

其它常用项(对照界面)
| 配置(界面文案) | 作用 |
|---|---|
| Class | 给整表挂样式类,可配合全局样式 |
| 标签的后缀 | 标签后统一后缀(如冒号) |
| 标签的宽度 | 桌面端左侧/右侧标签时的宽度(px);移动端宽度见上文「移动端自适应」 |
| 序号 | 标签前自动加 数字 或 中文 题号;可选 序号颜色(见上文「序号」) |
| 表单项的下边距 | 字段之间的竖直间距 |
| 地图组件 API Key | 使用地图类组件时填写 |
场景示例
入门:手机端报名表
背景:活动报名主要在手机上填,标签放上面更好扫,控件稍大更好点;只要提交、不要重置。
步骤:
- 在表单配置里把 标签的位置 设为 顶部,表单的尺寸 设为 大。

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

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

预期:窄屏下标签与输入更易扫读;误触重置的机会更少。字段尽量一列,短字段再用半宽。
常用:详情只读页
背景:审批详情只看不改,不需要提交/重置;若表里还有按条件隐藏的字段,提交链路(若仍存在)可忽略隐藏项。
步骤:
- 关闭 是否显示表单提交按钮 与 是否显示表单重置按钮。

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

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

预期:关键字段可再配禁用条件或只读,避免误改。只读页与录入页最好用两套模板或明确开关。
常用:带二次确认的申请单
标签用左/右对齐、显示提交 → 在 设置事件 里为「提交时」加确认框(见表单事件配置);金额过大时再配合字段级必填条件要附件。
常用:多表统一外观
表单尺寸、标签宽度先在本页定默认;品牌色按钮与危险操作样式放到全局样式,各表通过 Class 引用。
常用:手机报名再开移动端自适应
背景:桌面用左对齐标签方便录入,手机上希望标签在上方、更好扫读。
步骤:
- 桌面 标签的位置 保持左/右对齐;展开 移动端自适应。

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

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

预期:同一张表桌面与手机可用两套标签布局,互不覆盖。
常用:整表标签统一成强调色
背景:会议室预约等表希望所有字段标签用同一强调色,方便扫读。
步骤:
- 展开 标签的样式,在 颜色 中设好强调色(如
#2196f3)。

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

预期:未单独覆盖样式的字段,标签文字外观一致;个别字段仍可在组件样式里覆盖。
常用:问卷题号用数字序号
背景:满意度调查、入职登记等希望每题带 1. 2. 3.,序号颜色与品牌强调色一致。
步骤:
- 在表单配置将 序号 设为 数字,并设置 序号颜色。

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

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


