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

相关推荐
wocwin2 个月前
vue+element-ui的列表查询条件/筛选条件太多以下拉选择方式动态添加条件(支持全选、反选、清空)
vue.js·element
小Bk2 个月前
“表单大变身:当ElForm遇上Vue 3,开发效率满级的秘密武器”
前端·element
aiguangyuan3 个月前
Element 页面滚动表头置顶
vue·前端开发·element
伊织code3 个月前
Selenium WebDriver - 网络元素
爬虫·selenium·xpath·element·dom·网络元素·by.name
韩曙亮3 个月前
【Web APIs】DOM 文档对象模型 ④ ( querySelector 函数 | querySelectorAll 函数 | NodeList 对象 )
前端·javascript·element·dom·web apis·queryselector·nodelist
xiaok3 个月前
vue+elementui的layout布局中根据路由生成左侧菜单栏
前端·vue.js·element
Java小卷3 个月前
Vue3+TSX手撸Element Tree升级版
vue.js·vite·element
翼晗3 个月前
element-plus 自定义命名空间 el-config-provider namespace 不起作用,html 的class值改变了,但是样式不对
前端·html·element·element plus
红烧咸咸鱼4 个月前
element table表格行列合并span-method,根据数据动态行列合并
element·span-method·element表格行列合并·表格动态行列合并
码农研究僧4 个月前
详细分析Element中的MessageBox基本知识(附Demo)
vue2·js·element·messagebox