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

相关推荐
梦梦代码精2 小时前
《回收租赁系统技术选型避坑指南:业务闭环与二开自由度详解》
开发语言·低代码·docker·开源·代码规范
蜘蛛小助理2 天前
AI 自动推导业务自动化规则实战教程|多维表格低代码自动化落地
大数据·人工智能·低代码·自动化·多维表格·蜘蛛表格
希艾席帝恩3 天前
数字孪生平台与数据内容工具对比:山海鲸可视化VS镝数
大数据·人工智能·物联网·低代码·信息可视化·数字化转型
泡海椒3 天前
低代码规则开发:JQuick-Java声明式配置驱动开发落地教程
java·低代码·rxjava
半摆烂日常4 天前
自建WMS和买成品:三年成本对比
大数据·服务器·数据库·python·深度学习·低代码·numpy
液态不合群4 天前
低代码破局传统数字化困境:工程与供应链实战落地复盘
人工智能·低代码·数字化
jonyleek4 天前
低代码平台的数据架构设计:动态表单存储与查询优化
低代码·postgresql·开源·数据架构·动态表单·jvs低代码平台·jvs低代码
许彰午4 天前
27-AuthService登录链路
java·低代码·架构
昵称画4 天前
POC验证怎么设计用例?不走过程的实操要点
大数据·数据库·人工智能·低代码·excel
许彰午5 天前
24-MyBatisHelper与autoCount
java·低代码·架构