当前位置: 首页 > Web前端 > vue.js

解决Element resetFields()重置表单不生效的问题

时间:2023-04-01 00:06:58 vue.js

解决ElementresetFields()的reset形式不生效的问题可以帮助以后的同学避坑。1、问题重现是因为“add”和“edit”字段是一样的,所以我把它们放在了弹出窗体中,这样也节省了代码资源开销。如果你是这个问题,就不会出现在单独写的弹框里。重现步骤:进入列表页后,先打开编辑框,再打开新框,新框会填充第一次打开编辑框的内容,先打开编辑框,再打开新框框,新的编辑框也填充了数据表单的@closed方法调用了resetFields,但是没有生效。resetForm(){this.$refs['form'].resetFields();},二、resetFields()不生效的原因1、该方法用于重置表单将表单的数据设置为初始值2.这个初始值是在表单挂载的生命周期中分配的。3、因此,在窗体挂载之前,如果窗体被赋值,那么后续调用resetFields()都是无效的。因为窗体的初始值在mounted之前就已经赋值了3.解决方法是在窗体mounted之后进行赋值,可以完美解决问题,即点击编辑赋值时使用"this.$nextTick"方法。在代码上!修改前打开弹窗的方法:onShow(type,row){this.visible=true;if(type==='create'){this.dialogTitle='addXX';}elseif(type==='update'){this.dialogTitle='EditXX';this.form.name=row.name;this.form.des=row.des;}},打开弹窗修改方法:onShow(type,row){this.visible=true;if(type==='create'){this.dialogTitle='AddXX';}elseif(type==='update'){this.dialogTitle='EditXX';this.$nextTick(()=>{//注意这里this.form.name=row.name;this.form.des=row.des;});}},在此之后,this.$refs['form'].resetFields();它会生效