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

万事如伊 大吉大利

关于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,
       };
     });
}