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

相关推荐
sen_shan3 天前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
sen_shan6 天前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
大怪v13 天前
前端佬们!塌房了!用过Element-Plus的进来~
前端·javascript·element
一个爱挣扎的旺崽19 天前
用Element-Plus实现一个日期组件,日期选项均为5的倍数
vue.js·element
code_Bo20 天前
vue2使用el-cascader在table中下拉框不跟随滚动问题
前端·vue.js·element
Cutey9161 个月前
Element Plus的el-form 组件底层实现原理
前端·面试·element
码云之上1 个月前
奇技淫巧——element-ui组件"无损"拓展自身能力
前端·vue.js·element
jason_yang1 个月前
buildAdmin 框架使用半年总结
vue.js·架构·element
孤蓬&听雨1 个月前
Axure高保真Element框架元件库
产品经理·axure·element·设计·产品设计·原型设计·元件库
独泪了无痕3 个月前
研究 Day.js 及其在 Vue3 和 Vue 框架中的应用详解
前端·vue.js·element