应用框架：element Plus + vue3
场景形容：
场景一：
表单的增加和批改性能，专用同一个弹框，点击批改后，点击增加表单显示的是上次批改的数据。
场景二：
点击批改，数据回显到表单，而后点击勾销敞开弹框，在敞开的时候应用resetFields()清空数据，第二次点击批改的时候，回显的数据能够清空，然而表单的值会默认到第一次回显的数据。而且点击增加的时候，默认展现的就是第一次回显的数据。
官网提供表单校验以及革除数据的办法
场景一问题解决：
element plus的弹框有一个close办法，这个办法为弹框敞开时触发，在这个close办法内调用清空表单办法resetFields()，清空表单校验以及初始化表单数据。
<el-dialog :close-on-click-modal="false" @close="closeGift(giftBoxRef)" :title="!isUpdate ? '增加' : '批改'" v-model="BoxShow" ></el-dialog> // 敞开弹框const closeGift = (formEl: FormInstance | undefined) => { BoxShow.value = false; if (!formEl) return; formEl.resetFields(); // 革除表单校验以及表单数据初始化};场景二问题解决：
起因：在dialog弹框关上的时候，form表单的数据回显，这个时候表单的初始化数据其实是被回显的数据替换掉了，resetFields()在清空数据的时候，会默认复原数据到数据的初始值，如果第一次表单回显时初始化数据被替换，那么后续resetFields()清空数据后复原到的值会始终是第一次回显的值。
vue2
在vue2中能够应用 this.$nextTick(() => {// 这里对表单进行赋值}) 的办法解决
/* 批改 */const updateBox = async (row: any) => { this.$nextTick(() => { // 这里对表单进行赋值 // formData = row })}vue3
在vue3中也能够应用nextTick解决
import { nextTick } from "vue";/* 批改 */const dialogShow = ref(false); // 开启对话框const updateBox = async (row: any) => { dialogShow.value = true; nextTick(() => { // formData = row });};nextTick 是将回调推延到下一个 DOM 更新周期之后执行。在更改了一些数据以期待 DOM 更新后立刻应用它。
留神：nesxTick倡议放在函数的最初一步，如果dialogShow放在nextTick后，nextTick将不会产生作用。
表单清空的注意事项
element的resetFields()函数清空表单数据其实是跟表单上的prop属性无关的，只有表单上存在对应的prop属性，数据才会被革除。
<el-form :model="data" :rules="rule" ref="giftBoxRef" label-width="100px" label-suffix=":" > <el-form-item label="名称" prop="name"> <el-input v-model="data.name" placeholder="请输出名称" /> </el-form-item> <el-form-item label="形容"> <el-input v-model="data.priceDesc" placeholder="请输出形容" /> </el-form-item></el-form>const data = ref({ name : null, priceDesc : null})在这里，名称的输入框增加了prop=name，形容的局部没有增加，所以应用resetFields()清空表单数据时，只会重置data内的name值。而priceDesc的值不会有任何变动，须要手动重置。