element ui dialog 表单点击编辑，再点击添加，数据无法清空问题解决办法

太过爱你忘了你带给我的痛 2022-11-25 00:39 645阅读 0赞

—问题原因分析  
vue element ui在做编辑和添加时候通常使用一个dialog 弹框，这样就会出现一个问题，点击编辑 再点击添加，这时候数据

> 已经赋值

了， 所以this.$refs\[formName\].resetFields()，无法把数据重置为空\[\] 这肯定不是我们想要的结果，后面是这样解决的，在点击添加按钮的时候  
—解决方式 1  
element Ui新增表单的时候，表单默认数据是新增get\_new\_data,编辑的时候表单默认数据是get\_edit\_data,这两个数据只能填一个，根据当前状态（是新增还是编辑）。openDialog就执行一遍获取data的方法，closeDialog就执行一遍清除表单的方法。  
—解决方式 2

methods:{ 
          // 编辑
          compile(res) { 
    	        this.centerDialogVisible = true
    	        this.id = res.id
    	        // 数据放到这里面赋值，原始值就是空的，然后点击重置，重置的数据就是空
    	             this.$nextTick(() => { 
    	                     this.ruleForm = res
    	            });
    	         }
             }

第二种方式

vue element ui在做编辑和添加时候通常使用一个dialog 弹框，这样就会出现一个问题，点击编辑 再点击添加，这时候数据已经赋值了， 所以this.$refs\[formName\].resetFields()，无法把数据重置为空\[\] 这肯定不是我们想要的结果，后面是这样解决的，在点击添加按钮的时候

/添加用户
    addBtn(){ 
    	  this.dialogVisible=true
    	  this.messages="添加";
    	  this.$nextTick(function(){ 
    	    this.$refs['ruleForm '].clearValidate()
    	  })
    	  //方法一
    	  // for(let key in this.ruleForm ){ 
    	  // this.ruleForm [key]=""
          // }
    	  // this.ruleForm = {} 方法二
    },
     
    通过循环，把form 里面的每个属性值清空，这样打开就会变成一个空的表单了