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()）

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