elementUI弹窗关闭自动清空表单以及校验规则及不生效处理办法

问题描述：

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()中就可以了

this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据，如果修改对象的表单赋值没有放在nextTick中，就会在表单渲染时就会将这个修改对象作为初始值，所以出现无效了。使用nextTick保证表单在第一次渲染时是空值就可以了。