Vue动态表单联动核心是将依赖关系配置化，通过schema声明dependsOn规则，用watchEffect自动追踪变化并更新字段状态，支持显隐、选项、校验等多维度动态响应，统一收口至useFormDependencies函数实现可复用、易维护。

Vue 动态表单处理字段联动，核心是把“依赖关系”从硬编码逻辑里抽出来，变成可配置、可追踪、可复用的数据规则。不是靠一堆 v-if 和 watch 手动拼，而是让表单自己“感知变化、自动响应”。

用 schema 明确声明联动规则

在表单项配置中加入 dependsOn 或 when 字段，直接描述依赖条件。例如：

• dependsOn: { field: 'userType', value: 'enterprise' } —— 表示该字段只在 userType 为 'enterprise' 时显示
• dependsOn: { field: 'province', values: ['beijing', 'shanghai'] } —— 表示当省份是北京或上海时才启用
• hidden: true 或 disabled: true 可作为联动结果，由系统根据条件自动设置

用 watchEffect 自动追踪依赖变化

不手动写多个 watch，改用 watchEffect 监听整个表单模型，一旦任意被依赖字段变化，就重新计算所有受它影响的字段状态：

• 收集每个字段的依赖字段列表（比如 city 字段依赖 province）
• 在 watchEffect 中遍历所有字段，对每个字段执行其 dependsOn 判断逻辑
• 动态更新字段的 visible、required、options 等运行时属性
• 避免手动维护监听器数量，也防止漏掉某个依赖路径

联动不只是显隐，还包括选项与校验的动态切换

真实业务中，联动往往不止控制显示隐藏，还会改变下拉选项、必填规则甚至默认值：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• 城市下拉框的 options 应随省份选择实时请求或查表生成，schema 中可用函数代替静态数组：options: () => getCitiesByProvince(formModel.province)
• 身份证号字段在 userType === 'individual' 时才 required: true，这个规则可以写进字段的 rules 配置里，由校验器动态读取
• 某字段在特定条件下设为只读，只需在联动计算中设置 readonly: true，渲染层统一响应

把联动逻辑收口到统一的状态管理模块

不把联动代码散落在各个组件或 setup 函数里，而是封装成一个可复用的 useFormDependencies 组合式函数：

• 接收 formSchema 和 formModel 作为输入
• 内部构建依赖图（dependency graph），记录谁依赖谁
• 提供 updateFieldState(fieldKey) 方法，触发级联更新
• 支持嵌套结构（如数组子项内的字段联动）和跨层级依赖

这样做的好处是：加新联动规则不用动模板、不改业务组件，只改配置；排查问题时看一份 schema 就能理清全部依赖链；多人协作时规则清晰、不易出错。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！