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

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

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

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

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

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


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

核心一句话:子表单 = 主表单的 "一对一专属子表单"

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

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

子表单组件的作用:

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

二、子表单组件核心特性

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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


五、结语

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

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


项目已开源,欢迎 Star 收藏~

GitHubhttps://github.com/unione-cloud/unione-form-editor

Giteehttps://gitee.com/unione-cloud/unione-form-editor

相关推荐
希艾席帝恩1 天前
数字孪生赋能智慧物流:物流行业转型升级新路径
大数据·人工智能·低代码·ai·数字化转型
iori97king1 天前
告别混乱 Excel:用数据表建立客户管理模型
低代码·数据建模
ebok.1 天前
AI与低代码:京微智枢平台如何重塑企业应用开发
人工智能·低代码
希艾席帝恩2 天前
生产车间智能升级背后,数字孪生发挥了什么作用
大数据·低代码·私有化部署·低代码平台·数字化转型
搭贝低代码2 天前
设备管理系统迁移改造:从手工台账到二维码数字化的实践路径
java·低代码·搭贝
搭贝低代码2 天前
财务管控系统架构设计:从Excel到数字化管控平台的技术跃迁
低代码·系统架构·excel
缓慢更新3 天前
低代码CRM系统架构设计:从数据层到表现层的完整技术方案
低代码·系统架构·rxjava
亲爱的马哥3 天前
Vue3 + Element Plus 低代码表单设计器架构拆解与私有化落地实践
低代码·架构·敏捷流程
搭贝4 天前
企业智能知识库搭建实战:搭贝低代码平台实现AI知识管理系统
人工智能·低代码
全局牵引5 天前
连锁门店库存+会员系统:一个人怎么管8家店
低代码