resetFields()可清空表单数据和校验状态，但需满足：ref已挂载（避免v-if导致undefined，推荐v-show或加判空）、prop与v-model路径严格匹配（支持点号嵌套）、重置为初始值而非空值；特殊场景用clearValidate()单独清校验。

直接调用 resetFields() 就能同时清空表单数据和校验状态，但前提是必须满足几个关键条件，否则会报错或“看起来没反应”。

确保 ref 可访问且表单已挂载

ref 必须在 DOM 中真实存在，常见失效场景是用了 v-if 控制表单显示。此时若表单未渲染，this.$refs.formRef 就是 undefined，调用 resetFields() 必然报错。

• 推荐改用 v-show，保证 ref 始终存在
• 若必须用 v-if，调用前加判断：if (this.$refs.formRef) this.$refs.formRef.resetFields()
• 在 nextTick 中调用更稳妥，尤其在模态框打开后立即重置时

form-item 的 prop 必须与 v-model 路径严格匹配

resetFields() 依赖 prop 定位字段。如果 <el-form-item prop="userName"></el-form-item>，但 v-model 绑定的是 form.user_name，就会重置失败或部分字段无效。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• prop 值应为 model 对象的最终属性名（如 "name"、"address.city"）
• 嵌套字段支持点号写法，例如 prop="userInfo.email" 对应 v-model="form.userInfo.email"
• 确保所有需重置的字段都写了 prop，漏写会导致该字段不被清理

重置目标是初始值，不是空值

resetFields() 不是把所有字段设为空字符串或 null，而是还原到 data 或 reactive 初始化时的值。比如：

立即学习“前端免费学习笔记（深入）”；

• form: { name: '张三', age: 25 } → 重置后仍是 '张三' 和 25
• 想重置为空？得先手动把初始值设为空：form: { name: '', age: null }
• Vue 3 组合式 API 中，避免直接赋新对象（会丢失响应式），用 Object.assign(form, { name: '', age: null })

配套使用 clearValidate 处理特殊场景

有时你只想清掉红框和提示文字，但保留用户刚输的内容（比如切换表单类型后规则变了）：

• this.$refs.formRef.clearValidate()：清除全部字段校验状态，不改数据
• this.$refs.formRef.clearValidate(['email', 'phone'])：只清指定字段
• 动态切换 :rules 时，建议先 clearValidate()，再按需 validate()，避免旧规则残留