element-ui表单先编辑后新增resetFields()无效的坑

现象

页面有个新增和编辑共用的弹出框，在页面初始化后先点新增，后编辑，正常。先编辑，后新增使用resetFields表单数据竟然没有清空。

原因

在没有点新增或着编辑时，我的el-dialog弹出框里的内容是空白的，只有header和footer,并没有body,只有el-dialog弹出时才会加载内容。

接着我们看element-ui的文档

resetFields该方法是把表单的数据重置为初始值。并不是清空，因此可以想到：
当我们先新增在编辑，初始值是空的，调用resetFields()方法自然正常。
当我们先编辑在新增，会对表单赋值，初始值就是我们赋的值，调用resetFields()方法，表单里还有之前赋的值，并不是我们希望得到的清空表单。

解决

在编辑时，弹出框我们先让他初始化结束再赋值。

edit(row) {this.visible = true;this.$nextTick(()=> {// 赋值})},