关于vue表单重置清空踩到的一些坑

关于element-ui表单的新增和编辑遇到的问题：

有时候会出现使用this.$refs.form.resetFields()表单重置失效的问题：

在resetForm()基本使用方法没错的时候，频繁用点击编辑按钮打开表单弹窗载关闭弹窗后，再新增表单时会发现表单并未在弹窗关闭时清空，并且使用重置按钮再直接重置表单也无法清空表单；

eg:

编辑操作：

handleEdit(row){

this.visible=true;//召唤出弹窗

this.form.id=row.id

}

新增操作:

handleAdd(){

this.visible=true;//召唤出弹窗

 if (this.$refs.form !== undefined){

      this.$refs.form.resetFields()；//重置表单

   }

}

重置操作：

clearForm(){

this.$confirm("确认重置？重置后会失去您填写的所有信息").then(() => {

      if (this.$refs.form !== undefined){

      this.$refs.form.resetForm()；//重置表单

    }

  });

}

首先分析一下resetForm()方法，该方法所谓的重置表单并非将表单置空，而是将表单置为你设置的那个初始值，并且清空表单的验证状态；在你使用编辑或者新增按钮‘召唤’出表单弹窗时候，表单这部分dom元素会创建和销毁，而于vue的生命周期而言，在created时期，dom元素更新还未完成，而你对弹窗操作都是一些对dom进行click事件调用，created时期在dom还没更新完成时候你进行的dom操作是不会生效的，那自然而然重置操作会发生没有执行的情况，当重置操作没有执行的时候，当你下一次点开弹窗的时候，表单就会把未重置的数据当成初始值，自然而然你之后的重置操作不会生效；

解决方法：使用$nextTick()方法：在表单的数据发生改变后立即执行相应的dom操作；

新增：

handleAdd(){

this.visible=true;//召唤出弹窗

this.$nextTick(()=>{

 if (this.$refs.form !== undefined){

      this.$refs.form.resetFields()；//重置表单

   }

})

}

编辑：(点击编辑弹窗，在dom更新后在赋予表单该行的值，以防把之前未能清空的数据当作初始值，以至于之后重置都会重置为这个值)

handleEdit(row){

this.$nextTick(()=>{

this.visible=true;//召唤出弹窗

this.form.id=row.id

}

)

}

博主也还在vue学习之路上，有的东西根据自己的理解来写的，且理工男表达会很混乱，理解有误的地方请予以指出！

附上我在解决问题时看的两篇博客的链接，感谢这两位优秀的博主的文章：

1.https://www.jianshu.com/p/b95ea1388fc6

2.https://blog.csdn.net/zhouzuoluo/article/details/84752280