解读resetFields()不生效的原因

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 渲染完毕后才进行赋值，完美的解决了问题。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论