编辑-对话框关闭 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之后再进行赋值操作这样就可以完美解决问题了:

相关推荐
那你能帮帮我吗11 天前
el-tree过滤后的数据,选择父节点,仅选中过滤后的子节点
vue.js·element
牧野星辰15 天前
让el-table长个小脑袋,记住我的滚动位置
前端·javascript·element
小杨梅君21 天前
vue3+vite中使用自定义element-plus主题配置
前端·element
streaker30322 天前
Vue3 + TSX 封装 el-table:还原 Antd 风格的 Columns 配置
vue.js·element
jason_yang1 个月前
你也能成为ElementPlus,Ant-design开源贡献者
开源·element·ant design
执行上下文1 个月前
Element Plus Upload 添加支持拖拽排序~
前端·javascript·element
用户84913717547161 个月前
vue-element-plus-admin 深度剖析:第2期 -工程化实践与构建优化
前端框架·element·前端工程化
百锦再2 个月前
Vue使用element plus组件的细节问题之时间格式
前端·javascript·vue.js·vue·element·date·elementsplus
追光的栗子2 个月前
vue3+vite 项目中怎么引入 elementplus 组件库
前端·vue.js·element
拾光拾趣录2 个月前
Element Plus表格表头动态刷新难题:零闪动更新方案
前端·vue.js·element