前言
首先需要注意几个问题:
- 我们需要为每个 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
};
});
},