关于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

 

Logo

前往低代码交流专区

更多推荐