问题描述:在vue3+elementPlus中使用from表单重置表单数据是无效,编辑过后再点击新增按钮,表单数据还是回显并未清除置空,反之,先点击新增按钮在点击编辑按钮则现象正常,那我提供了2种解决办法,如下:
- 给弹出框Dialog绑定关闭close事件,再关闭事件初始化清空from表单里的响应数据(缺点:表单验证如chang会有表单验证失败的提示错误)
- 使用resetFields方法:通过查看文档,我们看到的文档对resetFields的解释为重置指定字段并删除验证结果,注意这里写的是重置,很多踩坑的小伙伴会把他当作是清空的误读,既然说到是重置,那必须提到form数据在生命周期的哪个阶段被赋值上的,答案是:onMounted,那么如果你在挂载之前就已经把form数据进行了赋值的话,那么重置的数据永远都是挂载之前的数据
示例(出现的场景)
如题:使用弹出框弹出from表单,由于需要(编辑操作,需要从外界传入数据赋值到表单上)可能会给表单附初始值,一般这个时候会在dialog的打开open()方法里写上赋值语句,如果第一次弹出,此时form表单还没有mounted结束的时候,就会出现上面说的问题,调用resetFields()表单不会被置空,而是回显了传入的数据
具体解决
在打开dialog的open()不要直接做赋值操作,加上nextTick(),在这个方法里做操作(mounted后再给表单进行赋值操作)