NocoBase 子表单字段用嵌套表单维护一对多关系数据【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase本篇围绕 NocoBase 界面搭建中的「子表单」SubForm源码中的AssociationField.Nester字段展开先说明它适用于哪类关系数据场景、与数据选择器/下拉选择器的区别再结合仓库中Nester组件的源码实现讲清对多/对一两种关系字段下子表单的渲染结构、增删行与随主表一起提交的底层机制以及如何通过字段组件切换与联动规则完成完整的嵌套表单配置。一、子表单是什么先新建、后关联的嵌套录入子表单适用于先新建关系数据后关联数据的场景多层级的关系数据以嵌套表单的形式在同一页面内清晰展示。与数据选择器Picker、下拉选择器Select等选已有记录的关系字段组件相比子表单的核心差异在于在当前页面区块上直接维护关系表的字段而不是跳转或弹窗去挑选一条已存在的记录关系数据随主表一起提交一次保存完成主表记录与新增关系记录的落库免去先建子记录、再回主表选择关联的两步操作。从源码结构看这一嵌套能力由 Formily 的ArrayField承载对多关系的子表单字段值是一个数组数组中每一项就是一个新记录对象整棵子表单树最终作为主表表单值的一部分一起提交。二、两种关系字段下的子表单形态关系字段类型决定了子表单的形态Nester.tsx 中的Nester组件会根据字段选项中的关系类型分派到两个不同实现hasOne / belongsTo → ToOneNester hasMany / belongsToMany / belongsToArray → ToManyNester即Nester组件内部通过options.type判断把ToOneNester或ToManyNester包在FlagProvider isInSubForm中渲染见 Nester.tsx#L59-L76。对多关系字段的子表单ToManyNester是对多场景的主体实现Nester.tsx#L130-L411其核心行为可以从源码中逐一对应到界面上的交互新增一行field.value为空时界面显示新增按钮点击后向表单数组中push(markRecordAsNew({}))把一个标记为新记录的空对象压入数组随后渲染出一组空的嵌套字段供填写。markRecordAsNew用于让提交逻辑区分需新建的关系记录与仅引用已有记录的关联Nester.tsx#L389-L406。编辑已有行每一行数据被包在RecordProvider、RecordIndexProvider、DefaultValueProvider中通过NocoBaseRecursionField递归渲染字段树basePath指向field.address.concat(index)使每一行的字段值精确落在数组的对应下标上Nester.tsx#L292-L307。删除一行每行右上角的删除按钮通过 Formily 的spliceArrayState同步更新字段状态并从field.value与field.initialValue中移除该下标保证变更能被表单正确识别为已修改Nester.tsx#L271-L290。是否允许删除受allowDissociate控制不允许解关联时只有尚未保存的新行无targetKey才显示删除按钮同时带模板的行x-template-uid的首行也不允许删除。选择已有记录并入表单当allowSelectExistingRecord为真时额外提供选择记录入口打开一个基于RecordPickerProvider的抽屉选择器选择结果经usePickActionProps同样以markRecordAsNew标记后并入field.value。从源码结构看这一机制让子表单既可以全新建也可以把已有记录纳入本次提交统一处理。移动端适配移动端布局下会用transformMultiColumnToSingleColumn把多列表单的 schema 转成单列再渲染保证窄屏下的嵌套表单可用性Nester.tsx#L147-L154。组件受allowMultiple、allowDissociate、allowSelectExistingRecord等关联字段选项约束这些选项来自关系字段本身的配置如允许多选允许解关联等。对一关系字段的子表单ToOneNester更简洁关系字段只能有一个值不展示新增/删除行操作而是直接渲染一个Card包裹的嵌套字段区Nester.tsx#L117-L127。值得注意的是源码中的默认值策略hasOne/belongsTo字段在编辑状态formBlockType update下不允许设置默认值因为其值唯一、不存在新增值的语义而Picker/Select之外的组件模式同样不允许设置默认值Nester.tsx#L93-L113。支持多层关系字段的嵌套配置子表单内部的关系字段可以继续配置为子表单从而形成多层嵌套每一层都由NocoBaseRecursionField递归渲染子 schema 实现只要内层关系字段同样选择子表单组件即可在页面上逐级展开录入多级关系数据。三、字段配置项切换组件与联动规则在界面搭建的字段配置面板中子表单字段提供两类关键配置字段组件可切换为其他关系字段组件例如下拉选择Select、数据选择器Picker等。这一切换由AssociationField的模式mode机制统一实现每种模式对应注册在 index.ts 中的同名组件AssociationField.Nester Nester、AssociationField.Select、AssociationField.Picker等运行时通过AssociationFieldModeProvider决定渲染哪一种。对多模式的渲染入口在 InternalNester.tsx它在界面设计器中把Nester的 schema 通过useInsertSchema(Nester)插入到当前关系字段的字段树中InternalNester.tsx#L30-L62并支持showTitle控制是否显示区块标题schema 插入逻辑封装在 hooks.tsx 的useInsertSchema中。更多组件差异如服务、过滤参数、label/value 字段名可参考 关系字段说明。联动规则子表单字段支持配置联动规则联动规则说明让子表单内部或同页面的其他字段随主表/上级字段的取值变化而执行显示/隐藏、只读/可编辑、默认值等动作。其底层绑定逻辑在 useLinkageRulesForSubTableOrSubForm.tsisSubFormOrSubTableField沿 schema 父级链向上查找确认当前字段确实处于子表单/子表格模式遇到FormV2即停止避免误伤外层表单useSubFormValue取到子表单自身的 schema 与表单值从中读出该子表单配置的联动规则随后forEachLinkageRule遍历每条规则把命中当前字段targetFields包含本字段名的规则通过bindLinkageRulesToFiled绑定到字段上并在字段卸载时执行__disposes清理保证嵌套层级内联动规则的生命周期正确。四、小结子表单的适用判断场景推荐组件说明关系记录是新建的且需随主表一次保存子表单Nester嵌套录入、随主表一起提交关系记录已存在只需建立引用数据选择器 / 下拉选择通过选择器挑选已有记录多级层级数据逐层新建多层子表单嵌套内层关系字段继续选子表单结合 Nester.tsx、InternalNester.tsx 与 useLinkageRulesForSubTableOrSubForm.ts 可以看到NocoBase 的子表单本质是以 Formily 数组字段为骨架、以递归 schema 为肉、以联动规则为神经的嵌套表单机制这使得先建关系数据、再关联主表的录入路径可以在一个页面区块内完成且多层级关系数据的结构与提交逻辑均由同一套递归渲染机制保证一致。【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考