新增成功后再打开同一个弹窗,所有字段还挂着上一次的红色报错,控制台没有异常,提交按钮仍然是禁用状态。乍看像缓存或者权限的锅,追下去往往不是。
dialogVisible.value = false; formRef.value?.resetFields();
追下去是这么回事:弹窗复用同一个组件实例,校验结果和 touched 状态留在表单实例里,关闭时只清了字段值没重置校验,下次打开直接继承了脏状态。
「表单校验状态残留」这类改动最怕改一半,回滚脚本先准备好,再动生产。一次只改一处,改完立刻验证,几个改动叠在一起,出问题就说不清是谁导致的。
先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。别只看报错的最后一行,往上看几行,真正的起因通常在上面。
具体做法是,关闭弹窗时调用 resetFields 把校验结果清掉,不要只清数据;或者给弹窗内容加 key,让它每次都重新创建,状态自然干净;每次打开时重新设置一遍校验规则和初始值,再渲染。
验收就看一点,第二次打开表单是干净状态,红色报错和禁用按钮都消失了。
