ELementPlus表单的resetFields不生效

问题描述

在Vue3中，使用Elementplus的el-dialog中的form表单resetFields失效，导致无法在打开Dialog时清空表单。Form表单初始值始终为上次回显的值（不是空值）。

---

原因分析：

当我们第一次打开Dialog，紧接着设置回显，因为Dialog还没执行完毕，这时form的初始值会被设置为回显的值，所以在调用×××Ref .resetFields()时form看起来没有重置。（与Vue的生命周期有关）

---

解决方案：

在设置该form的回显的时候，不要立即赋值，要等待该组件挂载完毕然后再给表单赋值。

可以使用：

nextTick(() => {
    additionalDataRef.value?.resetFields();
  });




nextTick(() => {
    additionalData.account = row.account;
    additionalData.password = row.password;
    additionalData.remark = row.remark;
  });

或者使用：

setTimeout(() => {
    additionalDataRef.value?.resetFields();
  },0)

其他简单原因：

1、表单上没有添加ref属性

2、每个item上没有添加prop属性