elementui--表单清空的问题、先编辑后新增resetFields()无效的坑

elementUI的表单resetFields()方法无法清空

需要注意几个问题：

1. 我们需要为每个form-item加上prop属性，要不然无法清空（大部分的问题就是出在这）
2. resetFields()方法是重置表单，重置为初始值，而不是设置为空值
3. 在resetFields()方法之前，如果修改了data里的表单默认值，那么重置以后就是你修改以后的值，而不是data里的值了

问题

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

原因

1、当我们先新增再编辑，初始值是空的，调用resetFields()方法自然正常。
2、当我们先编辑再新增，会对表单赋值，初始值就是我们赋的值，调用resetFields()方法，表单里还有之前赋的值，并不是我们希望得到的清空表单。

解决

在编辑时，弹出框我们先让他初始化结束再赋值，使用$nextTick再执行赋值。

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

关于form的resetFields()方法

1. 此方法就是吧formData的值设置为初始值；
2. 而这个初始值是在form的生命周期mounted被调用的时候赋上去的；
3. 在form mounted之前，如果给formData赋值了，那么后面调用resetFields()方法的时候，formData的值不会变成空字符串；

会出问题的场景

使用dialog弹出form表单的时候，由于需要，可能会给表达赋初始值，比如编辑操作的时候，会从外面传入数据，赋值到表单上。一般会在dialog的open函数里写赋值语句。如果是第一次弹出的话，此时form是还没有mounted结束的。这个时候就会出现上面说的情况，调resetFields()的时候，表单不会被重置为空字符串。

解决办法

在open方法里，不要直接做赋值操作，加上this.$nextTick方法，在这个方法里面做操作，这个时候form已经mounted结束了。