低代码平台表单设计器 unione form editor 组件 —— 子表单组件
低代码平台表单设计器 unione-form-editor 组件 —— 子表单组件
在企业级表单设计中，我们经常会遇到主信息附带一套专属详情信息的场景：一份员工表 → 附带一套档案信息一份合同主表 → 附带一套合同条款一个设备信息 → 附带一套技术参数一个客户信息 → 附带一套开票资料
这类数据是一对一关联关系，不适合用子数据（一对多），也不适合全部塞在主表单显得臃肿。这时就需要专业组件 ——子表单组件。
子表单组件是用于一对一关联数据的嵌入式容器组件，它以独立子表单的形式嵌入主表单，实现主表 + 子表一对一绑定。它的使用方式与子数据组件一致：先配置数据模型一对一关联，再在表单中拖拽子表单组件并绑定模型即可。
它让表单结构更清晰、模块更独立、数据更规范，是企业级结构化表单的必备组件。
一、子表单组件核心定位：一对一关联的嵌入式子表单
核心一句话：子表单 = 主表单的 “一对一专属子表单”
与子数据组件区别非常清晰：
- 子数据组件：一对多 → 表格形式、多条明细
- 子表单组件：一对一 → 嵌入式表单、单条详情
子表单组件的作用：
- 将一部分字段独立成子表，保持主表单简洁
- 实现主表与子表一对一外键关联
- 以嵌入式表单展示，不跳转、不弹窗
- 与主表单同步保存、同步校验
- 结构更清晰、权限更独立、扩展更灵活
二、子表单组件核心特性
一对一关联关系（企业级标准外键）主表与子表严格一对一绑定，一条主数据对应一条子数据，结构规范、查询清晰。
嵌入式展示，不弹窗、不跳转子表单直接内嵌在主表单中，像原生表单一样展示、编辑，体验流畅统一。
使用方式与子数据组件完全一致配置逻辑、操作步骤、数据模型绑定方式和子数据组件相同，会用子数据就会用子表单。
独立字段、独立布局、独立样式子表单可拥有自己的布局、栅格、标题、组件，不污染主表单结构。
与主表单同步提交、同步校验点击主表单保存时，子表单数据自动关联、自动保存、自动校验。
支持折叠 / 展开，保持表单简洁长表单场景可折叠子表单区域，让界面更清爽。
支持权限独立控制可单独设置子表单是否可编辑、查看、隐藏，满足复杂权限场景。
三、子表单组件标准配置流程（三步完成）
第一步：数据模型建立一对一关联
在主表数据模型中添加一对一关联，绑定对应的子表模型，设置外键关系。
第二步：表单设计器拖拽子表单组件
将子表单组件拖入主表单画布中。
第三步：绑定一对一关联数据模型
选择已配置好的一对一关联，系统自动加载子表单结构，即可完成内嵌。
全程可视化、无代码、自动关联。
四、子表单组件高频真实场景
- 员工信息表 + 档案子表单（一对一）
- 客户信息表 + 开票资料子表单
- 设备主表 + 技术参数子表单
- 合同主表 + 合同条款子表单
- 项目信息 + 项目预算子表单
- 工单主表 + 故障详情子表单
- 商品主表 + 资质证书子表单
凡是 “一个主信息 + 一套专属详情”，都用子表单组件。
五、结语
子表单组件是企业表单实现结构化、模块化、规范化的关键组件。它以极简方式解决一对一关联场景，让表单不再臃肿、结构不再混乱、数据不再散落。
使用方式与子数据保持一致，学习成本极低，是低代码平台中最实用、最优雅的详情容器组件。
项目已开源，欢迎 Star 收藏～
GitHub：https://github.com/unione-cloud/unione-form-editor
Gitee：https://gitee.com/unione-cloud/unione-form-editor