问题描述:
element组件中的Dialog 对话框,有时候会出现,第一次打开的时候校验没有问题,但是如果紧接着第二次打开弹框的时候,上一次的校验就会残留在本次打开的弹窗上
解决办法:
弹窗关闭一共就两种方式,第一种点击叉号,第二种点击取消按钮,那么就需要在这两个节骨眼上做文章;
点击叉号那么就需要在叉号的回调函数中去清空本次的校验记录,而取消按钮更好做,直接写个函数指明取消即可。
对于叉号而言,添加close事件,函数同取消按钮
<el-dialog
:title="title"
:visible.sync="open"
:width="dialogWidth"
@close="cancel"
>
取消按钮
<el-button @click="cancel">取 消</el-button>
函数
cancel() {
this.open = false;
this.$refs["form"].resetFields();
},
this.$refs.queryParams.resetFields(); 重置ref值为queryParams的表单,在vue中我们选中元素不在通过像Js中的DOM,而是通过ref来选中某个元素结点,这也是ref属性的基本功能之一。
当使用该方法无法达到效果时,原因以及姐姐办法如下
1、用法不对
要想this.$refs[‘form’].resetFields()方法有效,必须配置el-form表单中的:model 属性和el-form-item中的prop属性,才可以。
注意:this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值,不是清空表单,当表单第一次在页面中渲染时所用的数据就是初始数据。
2、坑1
在还没有显示对话框之前就调用this.$refs[‘form’].resetFields(),会报错。
解决方法:
this.$nextTick(() => {
this.$refs['form'].resetFields();
});
3、坑2
如果添加和修改共用一个表单时就会出现重置无效的情况。
解决方法:
this.$nextTick(() => {
utils.copyFormObject(data, this.form);
});
将为表单对象赋值的操作放在对话框显示之后的一个执行周期执行。
4、为什么要放在$nextTick()中就可以了文章来源:https://www.toymoban.com/news/detail-683773.html
this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值,不是清空表单,当表单第一次在页面中渲染时所用的数据就是初始数据,如果修改对象的表单赋值没有放在nextTick中,就会在表单渲染时就会将这个修改对象作为初始值,所以出现无效了。使用nextTick保证表单在第一次渲染时是空值就可以了。文章来源地址https://www.toymoban.com/news/detail-683773.html
到了这里,关于element校验规则在弹窗关闭后自动清空的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!