编辑-对话框关闭 el-form的resetFields()不生效的原因

编辑-对话框关闭 el-form的resetFields()不生效的原因

场景

在后台管理系统中,点击"操作"中的编辑,弹出 el-dialog 对话框,对列表项信息进行修改。

回显数据能够正常回显:

但是关闭后再点击新增时,数据没有被清空:

一般在关闭对话框时,都会调用 el-form的resetFields() 方法来清除表单的验证和表单项的值。

按道理来说,在编辑情况下关闭对话框后,表单的验证和表单项的值都被清空了,但当点击"新增"对话框出现时,却是表单项的值没有被清空:

原因

点击编辑的时候,执行showModal.value = true, 就显示dialog。然后立马就执行Object.assign(userForm, row)

此时数据修改了,但是dialog里面的el-form还没有mounted,也就是说,数据是在form表单mounted之前修改的,那么这个修改后的数据就成为了form表单的初始值。

而重点是,resetFields方法是用来把表单重置到初始值的,现在初始值都修改成回显数据了,再怎么调用resetFields都是徒劳

解决方案:

只要在 form 表单 mounted之后再进行赋值操作这样就可以完美解决问题了:

相关推荐
爱分享的鱼鱼8 天前
前端密码验证详解:Vue3+Element Plus 方案/纯血Vue 3 方案:从语法解析到实战实现
vue.js·element
jenemy12 天前
🚀 这个 ElDialog 封装方案,让我的代码量减少了 80%
vue.js·element
simon912419 天前
ElementUI:表格如何展示超出单元格的内容且不影响单元格?
前端·vue.js·element
我看刑23 天前
【已解决】el-table 前端分页多选、跨页全选等
前端·vue·element
招风的黑耳23 天前
基于 Axure 与 Element UI 风格的拖动列调整位置表格设计
axure·element·表格·拖动列
时71 个月前
iframe 事件无法冒泡到父窗口的解决方案
前端·element
魂祈梦1 个月前
ElementUI组件出现大量重复样式
vue.js·element·scss
Cassie燁1 个月前
el-button源码解读4——props color和native-type
vue.js·element
streaker3031 个月前
从零实现一个“类微信”表情输入组件
前端·vue.js·element
招风的黑耳1 个月前
Axure 表格案例:Element UI 风格设计
axure·element·表格·分页