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

相关推荐
液态不合群7 小时前
卡死在生产流程?AI破解制造业数字化落地顽疾
网络·人工智能·低代码·重构
CIO_Alliance8 小时前
iPaaS概念原理(2)| iPaaS的架构模型是怎样的?
人工智能·低代码·架构·ipaas·系统集成
SL-staff2 天前
(十七)「JVS-Rules规则引擎 V2.5」— 决策流程调用
低代码·api·规则引擎·jvs-rules·jvs·决策流程调用·在线模拟测试
Jeking2172 天前
Docker 一键部署实战:快速搭建供应商准入评审数字化管理系统
低代码·流程引擎·表单设计·流程设计·表单引擎·unione cloud
搭贝2 天前
低代码平台构建EHS环境健康安全管理系统:从隐患排查到合规审计的全流程实操指南
安全·低代码
mpp0072 天前
特赞 Clipo idea 发布:AI 正在进入社媒内容的“投前决策”环节
低代码·ai编程·ai智能开发
搭贝3 天前
低代码EMS能源管理系统构建:架构设计与落地实践指南(附IoT数据采集与能耗分析代码)
物联网·低代码·能源
HUIBUR科技4 天前
2026 年上半年,软件开发领域的 7 个观察
低代码·数字化转型
踩着两条虫5 天前
可视化 vs 终端 vs 云端:VTJ.PRO、Claude Code、Codex 三强横评
前端·vue.js·人工智能·低代码·架构
搭贝5 天前
低代码平台私有化部署架构与信创全栈适配实战
低代码·架构·rxjava