企业官网建设流程全解析

低代码平台表单设计器 unione-form-editor 组件 —— 子表单组件

在企业级表单设计中，我们经常会遇到主信息附带一套专属详情信息的场景：一份员工表 → 附带一套档案信息一份合同主表 → 附带一套合同条款一个设备信息 → 附带一套技术参数一个客户信息 → 附带一套开票资料

这类数据是一对一关联关系，不适合用子数据（一对多），也不适合全部塞在主表单显得臃肿。这时就需要专业组件 ——子表单组件。

子表单组件是用于一对一关联数据的嵌入式容器组件，它以独立子表单的形式嵌入主表单，实现主表 + 子表一对一绑定。它的使用方式与子数据组件一致：先配置数据模型一对一关联，再在表单中拖拽子表单组件并绑定模型即可。

它让表单结构更清晰、模块更独立、数据更规范，是企业级结构化表单的必备组件。

一、子表单组件核心定位：一对一关联的嵌入式子表单

核心一句话：子表单 = 主表单的 “一对一专属子表单”

与子数据组件区别非常清晰：

• 子数据组件：一对多 → 表格形式、多条明细
• 子表单组件：一对一 → 嵌入式表单、单条详情

子表单组件的作用：

• 将一部分字段独立成子表，保持主表单简洁
• 实现主表与子表一对一外键关联
• 以嵌入式表单展示，不跳转、不弹窗
• 与主表单同步保存、同步校验
• 结构更清晰、权限更独立、扩展更灵活

二、子表单组件核心特性

1. 一对一关联关系（企业级标准外键）主表与子表严格一对一绑定，一条主数据对应一条子数据，结构规范、查询清晰。

2. 嵌入式展示，不弹窗、不跳转子表单直接内嵌在主表单中，像原生表单一样展示、编辑，体验流畅统一。

3. 使用方式与子数据组件完全一致配置逻辑、操作步骤、数据模型绑定方式和子数据组件相同，会用子数据就会用子表单。

4. 独立字段、独立布局、独立样式子表单可拥有自己的布局、栅格、标题、组件，不污染主表单结构。

5. 与主表单同步提交、同步校验点击主表单保存时，子表单数据自动关联、自动保存、自动校验。

6. 支持折叠 / 展开，保持表单简洁长表单场景可折叠子表单区域，让界面更清爽。

7. 支持权限独立控制可单独设置子表单是否可编辑、查看、隐藏，满足复杂权限场景。

三、子表单组件标准配置流程（三步完成）

第一步：数据模型建立一对一关联

在主表数据模型中添加一对一关联，绑定对应的子表模型，设置外键关系。

第二步：表单设计器拖拽子表单组件

将子表单组件拖入主表单画布中。

第三步：绑定一对一关联数据模型

选择已配置好的一对一关联，系统自动加载子表单结构，即可完成内嵌。

全程可视化、无代码、自动关联。

四、子表单组件高频真实场景

• 员工信息表 + 档案子表单（一对一）
• 客户信息表 + 开票资料子表单
• 设备主表 + 技术参数子表单
• 合同主表 + 合同条款子表单
• 项目信息 + 项目预算子表单
• 工单主表 + 故障详情子表单
• 商品主表 + 资质证书子表单

凡是 “一个主信息 + 一套专属详情”，都用子表单组件。

五、结语

子表单组件是企业表单实现结构化、模块化、规范化的关键组件。它以极简方式解决一对一关联场景，让表单不再臃肿、结构不再混乱、数据不再散落。

使用方式与子数据保持一致，学习成本极低，是低代码平台中最实用、最优雅的详情容器组件。

项目已开源，欢迎 Star 收藏～

GitHub：https://github.com/unione-cloud/unione-form-editor

Gitee：https://gitee.com/unione-cloud/unione-form-editor