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

—问题原因分析
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 里面的每个属性值清空，这样打开就会变成一个空的表单了