解决elemen ui表单resetFields()方法无法清空问题_element ui resetfields

1、resetFields()说明

对整个表单进行重置，将所有字段重置为初始值（而不是设置为空值）并移除校验结果

2、场景

（1）el-form-item没有加入prop属性。
（2）el-form表单写在dialog的弹出框内，假设页面有个新增、编辑共用这个dialog，在页面初始化后先点新增，再编辑，正常；如果先编辑，编辑时调用服务端接口获取数据并赋值到表单上，然后新增使用resetFields()，会发现新增的dialog数据没被清空。

3、产生问题的原因

（1）prop属性是用于表单校验的，如果没加入prop属性会导致resetFields()无法清空
（2）当我们先新增再编辑，初始值是空的，调用resetFields()方法自然正常；当我们先编辑再新增，会对表单赋值，初始值就是我们赋的值，而这个初始值是在el-form的生命周期mounted被调用的时候赋值上去的 ，此时新增打开弹框的话，el-form的mounted是还没结束，如果在mounted之前给表单赋值（这里可以理解为在created的时候给表单赋值，因为created生命周期早于mounted），那么调用resetFields()方法的时候，表单的赋值是不会被重置为空字符的。

4、如何解决？

（1）加上prop属性即可解决。
（2）加上this.$ ​​ ​​ ​​​​nextTick()方法，编辑时调用服务端接口获取数据赋值的操作要放在this.$nextTick()方法里，这个时候el-form的mounted已经结束了。

5、this.$​nextTick()方法是如何解决这个问题的？

上面说了mounted之前赋值就相当于created的时候给表单赋值，而this.$ ​​​​​nextTick()方法主要是用在随数据改变而改变的dom应用场景中，vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this.$​​nextTick()的回调函数中。created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，而与created()对应的是mounted()的钩子函数则是在dom完全渲染后才开始渲染数据，所以在mounted()中操作dom基本不会存在渲染问题。