elementUI弹窗里的表单重置不生效如何解决

本篇内容介绍了“elementUI弹窗里的表单重置不生效如何解决”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

给弹窗添加关闭时的事件：

<el-dialog id="AddDialog" title="弹窗标题" :visible.sync="dialogVisible" width="55%" top="10vh" show-close @close="handleClose">
<!--@close="handleClose" 添加关闭时的监听事件-->

method:{
    handleClose(){
        this.$refs.dialogForm.resetFields();
	this.dialogVisible = false;
    }
}
//注：表单重置一定要添加prop属性和ref属性。prop属性绑定输入框绑定的值，ref不能和其他表单重复

本以为这么做就已经好了，等到自己测试的时候发现点击修改后再点击新增，重置按钮好像没有生效，但是又好像生效了，就再往上查了下，才知道问题出现在哪。

先说this.$refs.dialogForm.resetFields();的作用：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

注意是所有字段值是重置为初始值，而不是清空值。

有什么区别呢，就比如我刚做的，因为表单是在弹窗里，弹窗默认是关闭状态，里面的数据没被初始化，新增和修改都可以打开弹窗，如果先点击的是新增，表单里的值初始化就是为空的，空就是初始值，但是如果先点击的是修改，表单里的初始值就是打开的回显的数据。

这就是为什么重置有时生效有时又不生效，而有时又好像部分生效的原因。

找到原因后就要找到解决办法，

//修改方法
amend(code) {
    this.dialogVisible = true;
    this.$nextTick(() => {
        // 注意看这里
        以下是回显方法
    })
}

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

“elementUI弹窗里的表单重置不生效如何解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！