在el-dialog中使用el-form数据无法清空

问题

日常开发中，常利用el-dialog + el-form去进行表格项的新增和修改，在开发过程中，发现先点击编辑，后点击新增，位于dialog中的form表单无法清空。

问题代码

const formInfo = ref<FormInfo>({
    // ...
});
const toAdd = () => {
  dialogType.value = "add";
  dialogVisible.value = true;
  nextTick(() => {
    formRef.value.resetFields(); // 此时无论resetFields写在nextTick中还是利用定时器等都不起作用
  });
};
const toEdit = (item: any) => {
  dialogType.value = "edit";
  dialogVisible.value = true;
  Object.assign(formInfo.value, item);
};

问题原因

在toEdit方法中，将dialogVisible的值设为true之后，el-dialog正处于渲染中，在Mounted()生命周期之前，就将表单值赋值了，此时表单Mounted之后，就认为赋值后的为表单的初始值，而不是const formInfo声明处为初始值，而resetFields方法是将表单重置为初始值，就无法清空第一次编辑的数据。

解决办法

const toEdit = (item: any) => {
  dialogType.value = "edit";
  dialogVisible.value = true;
  // 在编辑赋值时使用nextTick使表单Mounted之后再去执行赋值
  nextTick(() => {
    Object.assign(formInfo.value, item);
  });
};