使用框架：elementplus+vue3场景说明：场景一：添加和修改表单的功能，共享同一个弹框，点击修改，点击以add形式显示最后修改的数据。场景二：点击修改，数据回显到表单中，然后点击取消关闭弹框。关闭时，使用resetFields()清除数据。第二次点击修改时，可以清除回显的数据，但表单的值会默认为第一次回显的数据。而点击添加时，默认显示的是第一次回显的数据。官方提供了表单验证和清除数据的方法。场景一问题解决：元素加弹框有一个close方法，弹框关闭时触发。在这个关闭方法中，调用了清除表单的方法resetFields()来清除表单校准。验证和初始化表单数据。//关闭弹框constcloseGift=(formEl:FormInstance|undefined)=>{BoxShow.value=false;如果（！formEl）返回；formEl.resetFields();//清除表单验证和表单数据初始化};场景2问题解决：原因：打开对话框时，回显了form表单的数据。这时，窗体的初始化数据实际上被回显数据代替了。当resetFields()清除数据时，数据会默认恢复到数据的初始值。如果在第一次回显表单时替换初始数据，则后续resetFields()清除数据后恢复的值将始终为第一次回显的值。vue2在vue2中可以使用this.$nextTick(()=>{//这里给form赋值})方法来解决/*modify*/constupdateBox=async(row:any)=>{this.$nextTick(()=>{//这里给表单赋值//formData=row})}vue3也可以用vue3中的nextTick来解决import{nextTick}from"vue";/*modify*/constdialogShow=ref(错误的）;//打开对话框constupdateBox=async(row:any)=>{dialogShow.value=true;nextTick(()=>{//formData=row});};nextTick是推迟到下一个DOM更新周期后执行的回调。更改一些数据后立即使用它以等待DOM更新。注意：nesxTick建议放在函数的最后一步。如果dialogShow放在nextTick之后，nextTick将不起作用。清除表单注意事项element清除表单数据的resetFields()函数其实和表单上的prop属性有关。只有当表单上有相应的prop属性时，数据才会被清除。constdata=ref({name:null,priceDesc:null})在这里，nameprop=name添加到输入框，但没有添加描述部分，所以使用resetFields()清除表单数据时，只会重置数据中的name值。priceDesc的值不会改变，需要手动重新设置。
