Vue动态表单字段显隐控制核心是配置驱动：通过showWhen纯函数定义条件、computed实时过滤可见字段、精准watch触发联动，并动态处理验证逻辑。
Vue 动态表单在复杂条件下实现字段显隐控制，核心在于把“条件”从硬编码中解耦出来，转为可配置、可组合、可响应的数据逻辑。不是靠一堆 v-if 堆砌判断，而是用结构化配置 + 响应式监听 + 条件求值三者协同。
用配置驱动显隐逻辑
每个字段定义 showWhen 函数，接收当前完整表单数据作为参数，返回布尔值：
- 支持单字段依赖：如
showWhen: (d) => d.type === 'company' - 支持多字段组合：如
showWhen: (d) => d.country === 'CN' && d.level > 2 - 支持函数复用：把常用规则抽成工具函数，如
isChina(d) && hasLicense(d) - 避免副作用：
showWhen必须是纯函数，不修改formData，只读取
用 computed 实时计算可见字段
不手动维护每个字段的 isShow 状态，而是统一通过计算属性生成过滤后的字段列表：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
const visibleFields = computed(() => formConfig.filter(field => field.showWhen?.(formData) !== false))- 模板中直接遍历
visibleFields，保证 DOM 渲染与数据状态严格一致 - 当
formData或任意showWhen内部依赖变化时，自动重新求值 - 比对多个
watch单独监听更轻量、更可靠
对关键字段做精准 watch 触发联动
仅对需要触发接口、重置子字段或影响其他状态的字段做显式监听：
立即学习“前端免费学习笔记（深入）”；
- 监听
country变化 → 调用接口拉取省份列表，并清空province和city - 监听
hasCar变化 → 若为false，自动设carBrand: ''并隐藏后续车辆字段 - 使用
{ deep: true }仅在必要时开启（如监听嵌套对象），避免过度响应 - 异步操作中加防抖或取消上一次请求（如用
AbortController）
处理验证与隐藏字段的关系
隐藏字段默认不应参与校验，但业务有时要求“条件必填”——即显隐受控，但一旦显示就必须校验：
- 验证规则里动态判断：
rules: [{ required: (field) => field.showWhen?.(formData), message: '此项为必填' }] - 提交前做一次显隐过滤校验，跳过
showWhen返回false的字段 - 避免用
v-if隐藏后仍保留Field组件实例导致校验残留（VeeValidate 等需配合validateOnBlur或手动resetForm()）
