vue element ui文档,vue中使用element

　　本文主要介绍vue elementui(对话框中窗体表单的重置问题)，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　解决了对话框中窗体表单的重置问题。解决的原理是元素UI表单重置无效。实例化意味着解决它。

对话框中form表单的reset问题

　　添加和编辑时一般使用同一个对话框和表单form，但是先点击编辑时表单form的resetfileds函数会失效。

解决原理

　　实际上结构是（通过vue类比）

　　数据中有一个form form的初始值，方法中定义了一个resetfiles的函数。resetfiles的作用是在挂载的生命周期执行之前，记录最后一个表单form中对象的值，并重新打开验证。resetfiles函数将在挂载生命周期中自动执行一次。

　　实际运行：第一次点击对话框时，第一次创建表单对象并加载dom，即自动运行一次resetfileds函数(此时已记录初始值)。

　　稍后，当再次调用resetfileds函数时，函数中记录的对象值将被赋给form form，因此如果您先单击编辑，则当您单击添加时，form form不会清空数据。

解决办法

　　1.再次添加时可以手动清除数据(缺点：此时resetfileds函数中记录的值没有变化，但仍是当时第一次点击编辑时分配的值，但不影响使用)

　　2.第一次加载dom时，如果要修改data中定义的form对象的值，应该把修改操作放在表单的dom元素已经加载之后，也就是mounted的生命周期之后(推荐的方式)。

　　代码：第一次加载dom时，如果要修改data中定义的form对象的值，放在$nextTick中执行(即等待resetfiles函数执行后，再将编辑或新添加的值赋给form form，这样resetfiles函数就记录了表单中数据定义的初始化值)

element UI form表单重置无效

　　组件库中有resetField和clearValidate两种重置方法，但这两种方法必须用ref实例化一个表单，用实例化的对象重置表单，但往往无效。

实例化是

　　El-form ref= operate form :model= form :rules= rules

　　使用方式往往是

　　这个。$refs[operateForm] this。$refs[operateForm]。clearValidate()

说下解决

　　Reset(){//注意：此方法中的Reset

　　this.image=[]

　　this.form={

　　图片：[]

　　}

　　}

　　手动重置表单数据，然后使用方法重置规则状态。

　　这个。$refs[operateForm] this。$refs[operateForm]。clearValidate()

　　//注意：进入表单前重置。在我这边，是一个子弹盒。我是在弹匣打开方法里写的。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。