问题记录--elementui中el-form初始化表单resetFields()方法使用时出现的问题

Z_B_L2025-10-25 9:47

遇到问题：

在打开表单时，如果有编辑回显就可能会遇到resetFields()没有将表单值清空，而是使用了第一次回显的内容

问题分析：

resetFields()并不会重置v-model绑定 的表单数据，它只重置表单校验状态和表单项的初始值 （即初始化时 :model 的值）

怎么解决・ࡇ・？：

首先检查el-form的使用有没有问题，有没有写错的格式、错误的数据使用之类的，检查完看起来都没问题的话，出现这种情况，那就是手动清空一下

比如：

javascript 复制代码

resetForm() {
  // 先清空 v-model 绑定的数据
  this.form = {
    id: null,
    name: '',
    sex: '',
    // 写成你 form 的默认初始值（空或默认值）
  };

  // 再调用 resetFields 重置表单状态（可选）
  this.$refs['form']?.resetFields?.();
}

通常这种方式都能解决这种问题

问题2：vue.runtime.esm.js:1887 TypeError: Cannot read properties of undefined (reading 'resetFields')报错

问题分析：

报错直接讲的就是resetFields这个东西是个undefined，说明执行的时候或者使用的时机不对，要么就是el-form的ref绑定写错了，要么就是dom没渲染就调用了，要么就是form的v-model绑定的值出了问题

怎么解决・ࡇ・？：

一般使用可选链（防御性编程）来避免报错，比如：

javascript 复制代码

this.$refs['subordinateForm']?.resetFields?.();

就是加个?.，这个东西不懂怎么用就上网查查ฅ ˘ฅ，查查就懂了

要不就用nextTick试试，一般都能解决，因为这种问题基本都是粗心导致的，所以写出这一篇博客来引以为戒˙Ⱉ˙ฅ，同志们不要粗心，共勉