vue+element-ui 关闭对话框清除验证和表单内容

在项目中遇到对话框关闭或者取消后，再次打开验证错误或者表单内容依然存在的效果，如下：

1、首先在你的对话框 取消按钮 加一个click事件，

　　取 消
    确 定
 

2、点击取消按钮，关闭对话框，清除表单验证

handleCancel(formName){
    this.$refs[formName].resetFields();
}

formName在这里表示对话框的form表单，当然前提是form中添加 ref属性， 即ref=“form”。
然而试了几次，都是报错“resetFields”未定义，查了一下资料，是DOM加载的顺序问题。

handleCancel(formName){    
    this.$nextTick(() => {
	  this.$refs[formName].resetFields();       // this.$refs.form.resetFields();
    });
}

3、对话框右上角的close按钮

 ......

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

closeDialog(done){
　　this.$confirm('确认关闭？')
　　.then(_ => {
    　　done();
        location.reload();
    })
    .catch(_ => { });
}

4.通过 location.reload() 刷新整个页面之后，给用户的体验感不太好，通过直接调用表单中的 ref 来强制清除表单信息。

// 点击取消按钮，关闭对话框，清除表单验证
closeDialog(){
  this.$refs['company'].resetFields()
  this.$refs['form'].resetFields()
},

由于表单不只一个，点击关闭弹框前的方法时，不能同时重置多个表单

5.通过传入参数来动态调用相应的表单重置信息

closeDialog(type){
  if(type){
	this.$refs[type].resetFields()
  }
},

同时这里通过点击关闭弹框事件来处理的

 ......

6.如果表单信息为非必填项，对于关闭弹框或者提交数据之后，需要手动将输入框置空