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

低代码平台表单设计器 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

相关推荐
窗边看云9 分钟前
波次拣货的分工:三个人怎么不撞车
低代码
ZKNOW甄知科技7 小时前
燕千云迭代版本发布:智能Agent深入业务现场
运维·人工智能·低代码·机器学习·自然语言处理·自动化·aigc
她的男孩9 小时前
条件分支两边审批一样,却发成两份待办:Forge Admin 审批设计器的公共节点合并
spring boot·低代码·工作流引擎
RuoyiOffice9 小时前
SpringBoot+Vue3 单据校验设计:保存草稿、提交审批、退回重填,各该检查什么?
spring boot·vue3·flowable·表单设计·ruoyi office·草稿保存·单据校验
驰骋工作流1 天前
低代码平台的评估指标:从「上层建筑 / 基座」两层看驰骋BPM驰骋低代码低代码工作流引擎
低代码
驰骋工作流1 天前
菜单的类型:为什么「菜单」需要分类——结合驰骋 GPN_Menu 的设计驰骋BPM驰骋低代码低代码工作流引擎
低代码
SL_staff2 天前
私有化低代码运维三重雷区:JVS开源栈中的Kafka/ES/RabbitMQ治理实践
java·低代码·全栈
快乐非自愿2 天前
低代码落地费控系统:从报销流程到业财闭环的实操方案
android·低代码·rxjava·ai低代码
她的男孩2 天前
页面已发布用户仍进不去:Forge Admin 门户入口与系统菜单挂载解耦
java·spring boot·低代码
窗边看云3 天前
库存 ABC 分类:好钢用在刀刃上
低代码