欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 美食 > Element Ui - 编辑时表单校验信息未清空问题处理

Element Ui - 编辑时表单校验信息未清空问题处理

2025/3/18 15:29:59 来源:https://blog.csdn.net/pikaqiu_komorebi/article/details/146257178  浏览:    关键词:Element Ui - 编辑时表单校验信息未清空问题处理

Element Ui 关闭对话框清空验证消息,清除form表单的操作

  1. 首先在对话框 取消按钮 添加 click事件,例如:(ps:callOf 里面的addGroupData和ref - - )
<div slot="footer" class="dialog-footer"><el-button @click="callOf('addGroup')">取消</el-button>
</div>
  1. 点击取消按钮,关闭对话框,清除表单验证
callOf(formName){this.creatGroup = false;this.$refs[formName].resetFields();
}
  1. 对话框右上角的close按钮

before-close:关闭前的回调,会暂停Dialog的关闭,function(done),done用于关闭Dialog。location.reload:刷新整个页面

closeDialog(done){done();location.reload();
}

方法2

增加 ref 属性

<el-form ref="formData"></el-form>
// Element UI 自带清除表单方法
this.$refs[formName].resetFields(); // 重置表单移除校验
this.$refs[formName].clearValidate(); // 仅清除验证

Vue表单报错 Error in event handler for “click” : "TypeError:Cannot read property ‘resetFields’ of undefined"在这里插入图片描述

报错原因 mouted加载数据以后,隐藏的弹出框并没有编译渲染进 DOM 里面。所以 click 弹出的时候 $refs 并没有获取到 DOM元素导致 ‘resetFields of undefined’

解决办法: 可以用 this.nextTick() ,将回调延迟到下次DOM更新循环之后执行this.refs[formName].resetFields() / clearValidate():清空验证

this.$nextTick(()=>{this.$refs.addForm.resetFields();// or this.$refs.addForm.clearValidate();  
})

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词