DTO Form Layout 配置复杂表单，支持选项卡/分组/分区
来源：互联网 2026-07-19 08:13:03在DTO中通过FormLayout配置复杂表单布局，支持字段排序、分组、响应式分栏及标签页拆分。布局仅控制字段位置，字段类型与校验仍由schema负责，实现了结构与行为的清晰分离，使布局与业务逻辑解耦，便于维护和扩展。
Cabloy 的 Form Layout 专为复杂表单布局而设计，允许开发者在 DTO 中直接描述多个字段在表单中的位置与层级，前端则依据这份配置自动渲染布局。
长期稳定更新的攒劲资源： >>>点此立即查看<<<
核心设计思想十分明确：Form Layout 仅负责“字段放在哪里”，而字段类型、校验规则等逻辑，仍由原有的 schema 和表单配置独立处理。
Form Layout 的核心功能
通过 Form Layout，开发者可以在 DTO 中轻松实现以下常见需求：
- 调整字段的显示顺序；
- 将相关字段归入带有标题的业务分组；
- 桌面端采用多列布局，移动端自动切换为单列；
- 将“基本信息”“培训记录”等独立内容拆分到不同 Tab 页；
- Create、Update、View 等不同表单场景沿用一致的布局思路。
Form Layout 的常用节点结构清晰：
field：放置单个字段；section：将字段排列为一列或多列；group：将相关字段组织在同一业务分组下；tabs/tab：将不同业务内容分配到标签页中。
实例：组织 Student 表单布局
以下代码截取自 Student Create DTO 中与 Form Layout 相关的部分。为突出布局结构，已省略 DTO 外层定义、页面操作及其他字段配置。
复制代码ZovaRender.block('basic-form:blockFormLayout', {
formLayout: {
children: [
{
type: 'tabs',
children: [
{
type: 'tab',
title: $locale('BasicInformation'),
children: [
{
type: 'group',
title: $locale('StudentProfile'),
children: [
{
type: 'section',
columns: { default: 1, md: 2 },
children: [
{ type: 'field', name: 'name' },
{ type: 'field', name: 'mobile' },
{
type: 'field',
name: 'imageId',
span: { default: 1, md: 2 },
},
],
},
],
},
],
},
{
type: 'tab',
title: $locale('TrainingRecords'),
children: [
{ type: 'field', name: 'level' },
{ type: 'field', name: 'trainingRecords' },
],
},
],
},
],
},
});
从外到内逐层阅读这段代码，即可清晰理解最终呈现的布局结构。
1. tabs 和 tab：按业务内容拆分页面
最外层的 tabs 创建了一组标签页，包含两个 tab：
BasicInformation：基本信息；TrainingRecords：培训记录。
当表单包含多个彼此独立的业务区域时，Tab 帮助用户每次只关注当前内容。字段较少时则无需强行使用 Tab，直接分组更为直观。
2. group：为相关字段赋予明确归属
基本信息页签中的 group 标题为 StudentProfile，将姓名、手机号和头像归入“学员资料”这一共同语义下。
group 可理解为带标题的业务分组，适用于联系方式、收货地址、审批信息等场景。
3. section：控制响应式分栏
columns: { default: 1, md: 2 } 表示默认一列，当屏幕宽度达到 md 及以上时自动切换为两列。因此，name 和 mobile 字段在桌面端并排显示，在手机上则上下排列。
4. field：引用 DTO 中已定义的字段
每个 field 通过 name 对应 DTO schema 中的字段，例如 name。其输入控件、标题和校验规则仍沿用字段本身的定义。
值得留意的是 imageId 的配置：span: { default: 1, md: 2 } 表示默认一列时占一列，在两列布局中横跨两列。这种设置适合头像、备注、说明等希望独占一行的字段。
节点选择指南
初次配置 Form Layout 时，可从最小结构开始尝试：
| 需求 | 建议使用 |
|---|---|
| 仅调整字段顺序 | field |
| 宽屏并排显示字段 | section |
| 相关字段共需标题和边界 | group |
| 拆分独立业务内容 | tabs / tab |
常见的组合方式为：Tab 划分业务区域，Group 表达业务分组，Section 处理响应式分栏，Field 放置具体字段。
需要注意的是，无需为了追求层级“完整”而套用每个容器。简单表单仅用 field 即可；需要两列时再加 section；字段确实属于同一业务块时，才考虑加 group。
容易被忽略的要点
Form Layout 控制的是字段放置的位置，而非字段的可见性配置。
如果某个字段不应显示，正确的做法是在字段自身的 schema metadata 中设置可见性。仅不将其写入 formLayout，并不等同于隐藏该字段，因为可见字段仍可能出现在表单末尾。
小结
Form Layout 让开发者能够在 DTO 中描述复杂表单的结构：
- 用
field决定字段顺序； - 用
section实现响应式分栏； - 用
group表达业务分组； - 用
tabs/tab拆分独立内容。
牢记这一分工即可：DTO 描述字段结构，schema 和表单运行时继续处理字段本身的行为。 当表单字段增加或调整时，只需同步修改 DTO 中的布局配置，无需在多个页面重复维护字段排列方式。
延伸阅读
- Form Layout Guide
- Form Guide
- Student Create DTO 示例
侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述
同类更新
更多
热游推荐
更多-
- DreamStudio
- Android/ | AI绘图
- 2026-06-30
-
-
- Playground AI
- Android/ | AI绘图
- 2026-06-30
-
- Adobe Firefly
- Android/ | AI绘图
- 2026-06-30
-
-
-
- Leonardo AI
- Android/ | AI绘图
- 2026-06-30
-
- Stable Diffusion
- Android/ | AI绘图
- 2026-06-30
