element - - - - - Form表单的resetFields()方法没有生效？

最新推荐文章于 2024-06-28 16:39:50 发布

Dark_programmer

最新推荐文章于 2024-06-28 16:39:50 发布

阅读量1.4k

点赞数

分类专栏： elementUI 文章标签： element-ui

本文链接：https://blog.youkuaiyun.com/Dark_programmer/article/details/128862630

版权

elementUI 专栏收录该内容

19 篇文章

订阅专栏

文章讨论了在使用ElementUI组件库的Form表单时遇到的resetFields方法不工作的问题。问题出现在当在Dialog中编辑表格行数据并尝试重置表单时，由于初始化值被回显数据覆盖，导致表单未重置。解决办法是通过异步赋值，如$nextTick，确保在Dialog渲染完成后再设置回显数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

万事如伊大吉大利

关于element组件，相信各位同学都不陌生。其各个组件不可谓不好用，能够快速的帮助开发人员进行排版布局&实现效果。

但是总会遇到一些不可避免的坑。

1. 场景描述

在table的行内，有一个编辑功能。点击时会将行内数据塞入form绑定的对象内，然后打开dialog展示form的数据。

代码展示：

editRow(row){
	this.ruleForm = {
		...row
	};
	this.dialogVisible = true;
}

弹窗展示正常。
修改form表单值正常。
提交数据正常。
提交之后重置表单数据异常！

2. 问题分析

重置表单的操作如下：

 this.$ref['ruleForm'].resetFields();

可以确定的是表单绑定的ref就是ruleForm。之前用的都是好好的，为什么这次就出现问题了呢？

仔细查看element文档之后，发现了端倪
在这里插入图片描述

请注意官方给出的说明:
对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

所以不是重置为不是空值！！！

当我们第一次打开Dialog，紧接着设置回显，因为Dialog还没执行完毕，这时form的初始值会被设置为回显的值，所以在调用this.$ref[‘form’] .resetFields()时form看起来没有重置。

3. 解决办法

既然已经找到原因，针对性解决问题即可。在打开弹窗的时候，不要直接赋值，可异步赋值，setTimeout或者this.$nextTick均可。
代码如下:

editRow(row){
	this.dialogVisible = true;
	
     // 设置回显数据
     this.$nextTick(function() {
       this.ruleForm = {
         ...row,
       };
     });
}