vue3+element-plus pop-up form reset (resetFields) fails and invalid solution

Problem scenario description

需求：一个弹框同时实现新增、修改功能。点击修改时赋值到弹框里面的表单，点击新增弹框里面表单都是无值

问题：当进入页面先点击修改再点新增，弹框里面的值无法清空。而先点击新增再点修改则不会出现这个问题

分析：经过多方资料查找，得出结论：此问题的导致原因是与Form绑定的Model对象第一次赋值有关系
即在哪个阶段被赋值的，赋值的是什么，reset之后就会恢复成这个阶段赋值的内容

Reference link

solution

Preconditions

1. el-form must define ref

   import {
         
          ref } from 'vue'
   const dataFormRef = ref()
   

   
2. el-form-item must have a prop attribute, and the parameter name bound to v-model must be consistent.
   

key code

3. The pop-up box visible is true first

   	const visible = ref(false)
   	
   	const addOrUpdate = (row?: any)=>{
         
         
   		visible.value = true
   	}
   

4. Introducing nextTick

   	// 在nextTick里面赋值
   	const addOrUpdate = (row?: any)=>{
         
         
   		visible.value = true
   		 nextTick(() => {
         
         
               dataForm.visitorUserId = row.visitorUserId
               dataForm.mobile = row.mobile
               dataForm.certNo = row.certNo
               dataForm.validNum = row.validNum
               dataForm.validTime = row.validTime
           })
   	}
   

5. Close popup

   const closeDialog = () => {
         
         
       dataFormRef.value?.resetFields()
       dataForm.visitorUserId = ''
       // console.log("dataFormRef.value", dataFormRef.value);
       
       visible.value = false
   }