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

相关推荐
Jeking21712 小时前
低代码平台表单设计器 unione-form-editor 组件 —— 子数据组件
低代码·动态表单·表单设计·表单引擎·unione cloud
Jeking21718 小时前
实战案例|引用组件在【销售订单表单】中的真实应用
低代码·动态表单·表单设计·表单引擎·unione cloud
2501_927283581 天前
堆垛机立体库:告别人工翻找与货物堆压
大数据·人工智能·低代码·自动化·区块链
多租户观察室1 天前
信通院标准体系2.0深度解读:低代码管理平台进入“精品竞争”时代
前端·低代码·程序员
Jeking2172 天前
低代码平台表单设计器 unione-form-editor 组件 —— 条形码组件
低代码·动态表单·表单设计·表单引擎·unione cloud
AI产品实战2 天前
开源政府门户设计器核心技术解析
低代码
AI服务老曹2 天前
基于Docker的低代码AI视频管理平台架构解析:打通GB28181/RTSP多协议,支持异构边缘计算与全源码交付
人工智能·低代码·docker
API开发平台2 天前
开源 API 开发平台 5.1.0 发布
低代码·开源
Jeking2172 天前
低代码平台表单设计器 unione form editor 组件 —— 引用组件
低代码·动态表单·表单设计·表单引擎·unione cloud