首页 前端知识 Vue3 | Element Plus表单重置以及resetFields不生效

Vue3 | Element Plus表单重置以及resetFields不生效

2024-01-27 01:01:36 前端知识 前端哥 384 90 我要收藏

一    根据element plus提供表单重置方法

1.首先el-from绑定一个ref值。

2.其次el-form-item需要绑定prop属性

如果不设置prop属性,表单提供的重置方法是不生效的,所以表单中需要加入prop属性

3.定义表单的ref

4.深层次查找你的ref绑定值找到resetFields方法

5.放你的方法中使用ref里找到的方法

总结:如果以上方法还不生效那么需要看你赋值的区域需要增加nextTick方法,因为他会将其值重置为初始值(个人理解:弹框打开时他的赋值渲染已经执行完了,所以关闭弹框的时候默认他的初始值为赋值后的数据,nexttick等页面加载完之后在执行,页面加载完之后它的初始值为空,之后才进行赋值。),如果你的表单需要进行显示隐藏时建议使用v-shou(个人理解:因为v-if是dom销毁重建,当你打开编辑时他的值已经赋值,关闭之后他的if就已经销毁了,当他执行清空时,已经找不到他的dom节点,所以该dom节点的赋值并不能被清空,所以打开新建时他的dom并未新建,但他的值已经赋值上去了并不会改变。),而v-show也有一些BUG就是当你需要隐藏但是还需要检验时,他的校验是不通过的,这时候就需要看个人需要去编写代码。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/559.html
标签
elementui
评论
发布的文章

06-jquery函数

2024-02-06 15:02:47

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!