vue+element-ui 关闭对话框清除验证和表单内容_对话框里表单验证怎么关闭-CSDN博客

本文链接：https://blog.csdn.net/qq_36437172/article/details/87364438

本文详细介绍了在使用Elment UI的对话框组件时，如何在对话框关闭或取消后正确重置表单，避免表单验证错误或残留内容的问题。包括使用click事件、$nextTick方法、before-close钩子以及通过传参动态调用表单重置等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

<div slot="footer" class="dialog-footer">
　　<el-button @click="handleCancel('form')">取 消</el-button>
    <el-button type="primary" @click="handleOk('form');">确 定</el-button>
</div>

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按钮

<el-dialog title="邀请用户" :visible.sync="dialogFormVisible" :before-close="closeDialog">
 ......
</el-dialog>

（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()
  }
},

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

<el-dialog title="邀请用户" :visible.sync="dialogFormVisible" @close="closeDialog('form')">
 ......
</el-dialog>

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