element-表单resetFields方法不生效问题

问题描述

当我点击修改按钮，数据回显，这时候点击叉，在点击新增按钮的时候表单数据没有重置（清空），但是我在新增按钮的回调里，明明调用了表单的resetFields()方法，这个方法为什么不生效呢？

代码分析

伪代码

1. 当我点击修改按钮的时候，直接给表单赋值

this.form = {...row}

2. 点击新增按钮调用resetFields()方法

if (this.$refs['ref_form'] !== undefined) {
  this.$refs['ref_form'].resetFields();  
}

不生效原因

当我点击修改的时候，紧接着我就给表单赋值，但是这个时候dialog还没有执行完毕，等dialog执行完毕，回显的值已经赋上去了，这个时候回显之后的值就会被当成默认值，所以点击新增按钮的时候调用resetFields（）方法，看上去是没反应，没有执行，其实是执行了，只是你的默认值就是回显之后的值

解决问题

在修改打开dialog的时候，不要着直接复制，在nexttick里赋值，或者加个定时器赋值

调用resetFields不生效的其他原因

1. 检查ref有没有绑定对
2. prop有没有都对应上