formEl.resetFields()详细解析

Question

vue3+ele-plus+vite的后台管理系统项目
添加和编辑共用同一个弹窗（el-drawer）
当我监听到弹窗关闭事件时：

formEditRef.value.resetFields()

重置表单

当我点击添加时，设置弹窗true弹出，并重置表单，手动设置表单中每一个的属性值为空

const addFun = () => {
  drawerData.visible = true;
  formEditRef.value.resetFields()
  teacherData.id = "";
  teacherData.teacherName = "";
}

当我点击编辑时，设置弹窗true弹出，并重置表单，手动赋值表单中每一个的属性值

const editFun = d => {
  drawerData.visible = true;
  formEditRef.value.resetFields()
  teacherData.id = d.id;
  teacherData.teacherName = d.name;
}

刷新页面
当我先点击添加方法的时候，表单是空的，关闭弹窗，点击编辑方法时，表单被赋值，这时候点击重置按钮，执行formEditRef.value.resetFields()会被重置为空
刷新页面
但是当我先点击编辑，再点击添加的时候，点击重置按钮，执行formEditRef.value.resetFields()却会被重置为编辑时赋的值
求：帮我解析一下这个问题
按理说我每次刷新页面，初始值不应该都是空的嘛，为什么重置的时候成了 第一次赋值操作后的值呢？

重要！
如果说只是为了达到预期的（添加重置为空，编辑赋值），我自己可以实现的，我意思是 这个问题的 解析！ 就是有没有读过ele源码的 解析一下他这个啥原理昂
我自己写了个纯html页面 每个form元素都有一个defaultValue的属性，我尝试修改默认赋值，发现他的值只会是初始化页面的初始值，并不会有element这种情况，不知道是ele自己封装实现的重置方法，还是调用的原生的defaultValue，又为什么会出现这种情况呢？

Answer 1

你在 formEditRef.value.resetFields() 中的 TeacherData.id = ""; 和 TeacherData.teacherName = ""; 会修改 formEditRef.value 的值，而 formEditRef.value 是 Form 组件中使用的表单，因此这些修改将影响表单的值。
在你点击添加和编辑按钮时，弹窗的 visible 属性被设置为 true，因此当你关闭弹窗时，Form 组件会重置其值。
但是，当你点击添加按钮并在编辑后点击关闭弹窗时，弹窗的 visible 属性仍然被设置为 true，但是 Form 组件没有重置表单的值。这可能是因为 Form 组件的 resetFields() 方法没有在添加或编辑操作之后被调用。
在添加或编辑操作后，应该在 Form 组件的 resetFields() 方法中重置表单的值。这样，当你关闭弹窗时，Form 组件会将表单的值重置为最初的空值。
我们可以这样修改代码：

<form @submit.prevent="addFun()" v-model="formData">
  ...
  <div class="el-form-item">
    <label>ID</label>
    <el-input v-model="formData.id" size="mini" :disabled="!addFun" />
  </div>
  <div class="el-form-item">
    <label>姓名</label>
    <el-input v-model="formData.teacherName" size="mini" :disabled="!addFun" />
  </div>
  ...
</form>

<el-drawer v-model="drawerData.visible" title="添加">
  <el-form ref="formEditRef" :model="formEditRef.value" label-position="top">
    <Form v-model="teacherData" ref="teacherForm" />
    ...
  </el-form>
</el-drawer>

<button v-if="drawerData.visible" class="el-button el-button--primary" size="mini" type="primary" @click="editFun(teacherData)">编辑</button>

<button v-if="!drawerData.visible" class="el-button el-button--primary" size="mini" type="primary" @click="addFun()">添加</button>

在添加或编辑操作后，重新修改 Form 组件的 resetFields() 方法，使表单的值得到正确的重置。