element-plus表单重置resetFields方法不生效

我的需求是做一个增删改查，用表格渲染数据，点击新增和编辑按钮的时候显示一个弹出框，每次关闭的时候表单清空数据，我遇到的bug是：先点击添加框再点击编辑框，调用resetFields()方法，表单数据可以被清掉，但是先点击编辑按钮再点击添加框，调用resetFields()就不能清除表单数据了。

分析：不是resetFields()不起作用；而是没搞清楚resetFields()的原理，resetFields方法是将表单重置为form组件dom刚渲染时的初始值，而我的数据是通过表格的scope.row数据直接赋值给表单的，而我表单的数据是通过reactive定义的，在点击编辑按钮的时候就立刻赋值了，所以我的表单初始值就是编辑的那条数据的值（称这条数据为初始编辑数据），调用resetFields()清除也是重置到初始编辑数据；

解决：

第一种：有获取单条数据接口的,用获取接口的数据进行赋值(不推荐，多发了一次请求)

if (state === 'update') {
    console.log('将数据渲染到列表上');
    editId.value = address.id
    const res =await getSingleAddress(editId.value)
    console.log("编辑地址id"+editId.value);
    //使用获取单条数据的接口数据进行赋值渲染
      //以下为初始化编辑表单函数
      Object.keys(addressForm).forEach((key)=>{ 
        addressForm[key] = res.data.result[key]
    })
    console.log("渲染完毕，等待点击按钮");
  }

第二种：不想多请求一次接口或者没有获取单条数据的接口的，可以在给nextTick()里面初始化编辑弹出框的form表单初始值

//当进入编辑状态的时候把数据传给表单
  if (state === 'update') {
    console.log('将数据渲染到列表上');
    editId.value = address.id
    console.log("编辑地址id"+editId.value);
    //使用nextTick方法
    nextTick(()=>{
      //以下为初始化编辑表单函数
      Object.keys(addressForm).forEach((key)=>{ 
      addressForm[key] = address[key]
    })
    })

关键：resetFields方法是将表单重置为form组件dom刚渲染时的初始值

那么：

先点击新增框时，表单里面的数据都为空，所以关闭的时候重置为组件dom刚渲染的初始值，就是空表单，可以正常实现功能

​​​先点击编辑框时，直接赋值编辑框表单的值的话，组件dom刚渲染的初始值就是你赋给编辑框的初始值，这样调用resetFields方法重置的时候，回到的值也是赋给编辑框的初始值，所以你点击新增框的时候还是会有上一次编辑框的数据

分享结束！谢谢~~