resetFields()不生效的原因
编辑用户
新增用户
点击编辑的时候，数据回显，没问题：
点击取消，会调用方法
按理说应该会把表单清空。但是我们再点击新增的时候，数据并没有被清空：
原因：
点击编辑的时候，一旦执行showModal.value = true， 就显示dialog，然后立马就执行Object.assign(userForm, row)
此时数据修改了，但是dialog里面的el-form还没有mounted，也就是说，数据是在form表单mounted之前修改的，那么这个修改后的数据就成为了form表单的初始值。
而重点是，resetFields方法是用来把表单重置到初始值的，现在初始值都修改成回显数据了，再怎么调用resetFields都是徒劳
解决方案：
只要在 form 表单 mounted之后再进行赋值操作这样就可以完美解决问题了。
el-form中设置resetFields方法不生效问题
el-form中设置resetFields方法不生效 前置知识点问题描述问题代码定位问题使用排除法 问题分析解决办法show you code分析
前置知识点
- Event loop
- 宏任务与微任务
问题描述
第一次访问页面，先进行查看、编辑动作，操作结束退出el-dialog时，el-form绑定的数据与校验信息均无法置空，且后续每次退出时不带值进入，el-form初始值始终为第一次访问页面的值，且非刷新页面无效。
问题代码
// 弹窗
<el-dialog :visible.sync="dialogShow">
<el-form ref="refForm" :model="form">
<el-form-item label="标题" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
</el-dialog>
// 重置表单信息
resetForm() {
this.dialogShow = false;
this.$refs.refForm.resetFields();
},
// 查看行元素
skipBtn(row) {
this.dialogShow = true;
this.form = JSON.parse(JSON.stringify(row));
},
定位问题
使用排除法
- 表单上没有添加ref属性？
- el-form-item没有添加prop属性？
可以看到代码里都有体现，排除代码编写问题，去查看文档，尝试定位是组件在初始渲染过程中保留的初始值问题。
问题分析
在页面初始化过程中，若直接对form赋值, 即
this.form = JSON.parse(JSON.stringify(row));由于Dialog未渲染完毕， 初始值将为第一次对form赋值结果而非空值。
解决办法
知道了问题所在，问题就解决一半了，不多说
show you code
// 查看行元素
skipBtn(row) {
this.dialogShow = true;
this.$nextTick(() => {
this.form = JSON.parse(JSON.stringify(row));
}
},
分析
由于Dialog未渲染完毕，才导致初始值将为第一次对form赋值结果而非空值，那么只需在Dialog渲染结束后才给form赋值就OK了。
这里添加$nextTick，就将赋值过程移出同步任务队列放到微任务队列，当Dialog 渲染完毕后才进行赋值，完美的解决了问题。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
