解决 element-ui 表单清空的问题：先编辑后新增 resetFields() 无效-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决 element-ui 表单清空的问题：先编辑后新增 resetFields() 无效。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

首先需要注意几个问题：

我们需要为每个 form-item 加上 prop 属性，要不然无法清空（大部分的问题就是出在这）
resetFields() 方法是重置表单，重置为初始值，而不是设置为空值
在 resetFields() 方法之前，如果修改了 data 里的表单默认值，那么重置以后就是你修改以后的值，而不是 data 里的值了

一、问题

1、页面有个新增和编辑共用的弹出框，在页面初始化后先点新增，后编辑，可以重置 form。
2、先编辑，后新增使用 resetFields() 表单数据没有清空。

二、原因和解决方法

1. 原因

1、当我们先新增再编辑，初始值是空的，调用 resetFields() 方法自然正常。
2、当我们先编辑再新增，会对表单赋值，初始值就是我们赋的值，调用 resetFields() 方法，表单里还有之前赋的值，并不是我们希望得到的清空表单。

2. 解决方法

在编辑时，弹出框中的表单我们先让他初始化结束再赋值，使用 $nextTick 执行赋值。

代码如下（示例）：

handleEdit(row) {
  this.addAndEditDialogShow = true;
  this.dialogTitle = '编辑';

  // 解决表单重置不成功的问题
  this.$nextTick(() => {
    this.formData = {
      id: row.id,
      taskCode: row.taskCode,
      fullName: row.fullName,
      priority: row.priority,
      taskType: row.taskType,
      robotId: row.robotId,
      starTtime: row.starTtime
    };
  });
},