记一次elementui el-form组件resetFields方案无法重置部分字段值的问题

背景

今天在使用elementui时，出现了一个诡异的问题，编辑、新增功能公用的表单，绑定数据后，关闭模态框无法重置部分表单项的值，如下图所示：

点击编辑按钮，打开模态框如下图：

关闭编辑模态框后，打开新增模态框，如下图（图中资源路径字段并未被重置）：

问题排查

1. 是否el-form-item缺失了prop字段？
2. 表单绑定的值是否与data中定义的变量不一致？
3. 是否因为缺少了$nextTick函数？

• 代码如下：

<!-- Form -->
<el-form ref="editForm" :model="edit.data" :rules="edit.rules" label-width="80px" label-position="left" >
  <!-- 部分字段略... -->
  <el-form-item prop="type" label="类型">
    <el-select v-model="edit.data.type" placeholder="请选择菜单类型" :disabled="edit.data.id !== null" >
      <el-option v-for="(item,index) in validMenuTypes" :label="item.name" :value="item.value" :key="index" ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item prop="resource" label="资源路径" v-if="edit.data.type === 'menu' || edit.data.type === 'function'" >
    <el-input v-model="edit.data.resource" placeholder="请输入资源路径"></el-input>
  </el-form-item>
</el-form>

// Field Definition
edit: {
	data: {
		id: null,
		code: null,
		name: null,
		type: null,
		system: null,
		resource: null,
		orderNum: null,
		iconClass: null,
		parentId: null,
		query: null
	}
}

// Data Bind
openEditDialog(operateType, row) {
  if (operateType === "add") {
    // 部分逻辑略...
  } else {
    // 数据绑定
    this.edit.data.id = row.id;
    this.edit.data.parentId = row.parentId;

    this.$nextTick(() => {
		this.edit.data.code = row.code;
		this.edit.data.name = row.name;
		this.edit.data.type = row.type;
		this.edit.data.iconClass = row.iconClass;
		this.edit.orderNum = row.orderNum;
		this.edit.data.query = row.query ? row.query + "" : null;
		this.edit.data.resource = row.resource;
    });
  }
  this.edit.dialog.visible = true;
}

参照如上代码可以看到，el-form-item有对应的prop属性，el-input绑定的参数与定义的变量一致，且打开编辑表单绑定初始值时也使用到了$nextTick函数

疑问： 那么问题究竟在哪里呢，为什么只有一个表单项的值无法重置呢？
排查： 进一步排查，发现表单项使用到了v-if，el-form.resetFields方法不会重置未显示表单项绑定的值
尝试： 抱着试一试的心态，去掉了resource字段的v-if，再次尝试发现数据正常重置了，但是这里的v-if是不能去掉的，进一步思考得出了如下的处理方案：

解决方案

// 1. v-if中使用到了type字段
v-if="edit.data.type === 'menu' || edit.data.type === 'function'"
// 2. $nextTick对type字段做了赋值操作,此时赋值完成后表单项挂载还未完成，导致了关闭模态框时无法清除resource字段
this.$nextTick(() => {
	this.edit.data.code = row.code;
	this.edit.data.name = row.name;
	this.edit.data.type = row.type;
	this.edit.data.iconClass = row.iconClass;
	this.edit.orderNum = row.orderNum;
	this.edit.data.query = row.query ? row.query + "" : null;
	this.edit.data.resource = row.resource;
});
// 3. 在受影响字段的外层，再添加一层$nextTick，使外部变化影响的dom节点挂载完成后，再对表单项赋值，如下：
this.$nextTick(() => {
	// 先绑定会影响表单项是否显示的字段值
	this.edit.data.code = row.code;
	this.edit.data.name = row.name;
	this.edit.data.type = row.type;
	
	// 待隐藏的表单项挂载后,再绑定其他字段值
	this.$nextTick(() => {
		this.edit.data.iconClass = row.iconClass;
		this.edit.orderNum = row.orderNum;
		this.edit.data.query = row.query ? row.query + "" : null;
		this.edit.data.resource = row.resource;
	});
});

至此问题处理完毕！

总结

el-form无法重置表单项的原因有以下四点：

1. el-form-item的prop属性缺失或属性值 不等于 字段名称
2. 表单项本身就有默认值
3. 表单数据绑定时未使用$nextTick函数（resetFields 重置到挂载前的数据）
4. 未显示的表单项无法重置

2020-05-07补充

5. 已禁用的表单项无法重置（可先解除禁用在调用resetFields方法）