elementui form 清除校验文字自动提示

最新推荐文章于 2024-04-25 16:37:07 发布

r清风明月

最新推荐文章于 2024-04-25 16:37:07 发布

阅读量1.5k

点赞数

分类专栏： elementui vue 文章标签： vue elementui

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

版权

vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

elementui

3 篇文章 0 订阅

订阅专栏

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

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

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>