关于element在vue中的使用--form表单清空验证

Posted essmin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于element在vue中的使用--form表单清空验证相关的知识,希望对你有一定的参考价值。

情景:在弹框中使用element表单。

问题:表单先回显后表单不清空

描述及原因:在初次打开弹框新增表单内容时,表单验证方法resetFields()是可以使用的,但是在如果页面是先回显数据时,如果使用该方法,表单就不会清空,后来观察了一下,是这个方法虽然不能清空,但是再修改后会重置到最初赋值状态,百度了一下,发现数据绑定在dom上是发生在mounted中的,而我们在定义数据时是发生在created时绑定的数据,所以重置时会重置到赋值的阶段。

解决方法:

1>this.$nextTick()将赋值操作放到dom渲染结束之后

2>我们需要清空表单时,调用初始化方法,这个方法用来初始需要赋值为空的表单。

显然第一种方法比较简便

参考链接:https://www.jianshu.com/p/21904d061007

以上是关于关于element在vue中的使用--form表单清空验证的主要内容,如果未能解决你的问题,请参考以下文章

关于自定义的element-ui表单组件的校验

vue获取form表单file

vue element-ui 的form表单验证rules

前端学习(3004):vue+element今日头条管理--使用form表单

element中form表单验证左边的字体换行了

elementui form 表单数据不置空问题