ELementPlus表单的resetFields不生效

原创于 2022-09-13 15:21:30 发布

· 1.9k 阅读

1 ·

版权

文章标签：

#vue.js #javascript #ecmascript

在Vue3应用里，遇到ElementPlus的el-dialog组件内form表单调用resetFields方法无法清空的情况。问题源于组件挂载未完成时就设置了回显值。解决方案是利用nextTick或setTimeout确保在组件完全挂载后再进行回显赋值和表单重置，以避免表单初始值错误。此外，检查表单元素是否缺少ref和prop属性也是排查步骤之一。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

在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属性