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 就能理清全部依赖链；多人协作时规则清晰、不易出错。
