提交按钮加载状态需绑定表单校验与提交流程：校验通过才提交，提交中启用loading并防重复点击；用ref调用validate()返回promise，成功后设loading=true再发请求，finally或catch中务必重置loading=false。
提交按钮显示加载状态，核心是把按钮的 loading 状态和表单校验、提交流程绑定起来，而不是单纯靠点击就加 loading。关键在于：校验通过才开始提交，提交中才启用 loading，且要防止重复点击。
用 ref 获取表单实例，手动控制校验与 loading
Element Plus 或 Ant Design Vue 的 el-form / a-form 都提供 validate() 方法，它返回 Promise。你可以用它串起“校验 → 成功则提交 → 提交中设 loading → 完成后重置”这一链路：
- 给
<el-form></el-form>加ref="formRef"，并在 script 中定义const formRef = ref() - 按钮点击时，先调用
formRef.value?.validate()；校验失败会自动高亮错误项并触发提示，不执行后续逻辑 - 校验成功（Promise resolve）后，立即将
loading.value = true，再发起 API 请求 - 请求完成后（无论成功或失败），必须设
loading.value = false，否则按钮会一直卡在 loading 态
结合 Formily 的 Submit 组件更省事
如果你用的是 Formily（如 @formily/next 或 @formily/antd），它的 Submit 组件已内置该逻辑：
- 点击即自动触发全表单校验
- 校验通过后进入 loading 态，并禁用按钮，天然防重复提交
- 你只需传入
onSubmit回调，在里面写请求逻辑；组件会在请求结束后自动退出 loading - 不需要手动管理
loading变量，也不用担心忘记重置
避免常见坑：loading 状态没及时关闭
loading 没关，通常是因为：
- 请求用了
try/catch，但catch块里漏写了loading.value = false - API 返回了 4xx/5xx 错误，但只处理了 success 分支，error 分支没重置 loading
- 用了
await却没包在try/catch，异常直接抛出，后续代码不执行 - 表单校验失败时，你仍执行了提交逻辑（比如没等
validate()的 Promise 就往下走）
只要校验、请求、状态更新这三步串在同一个异步流里，并保证 finally 或 catch 中清理 loading，按钮就能准确反映真实提交状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
