element-ui中利用resetFields()清空表单时的坑

 

api 中能查询到的是 resetFields()，所以你可能是这样写的：

        setTimeout(() => {
          this.$refs['personnelForm'].resetFields();
        }, 20);
 

结果没有起作用

网上另一种说法是：

网上的说法是使用 this.$nextTick()，

然而亲测后也是没有起作用，看来只能改数据了，把绑定的数据赋值为空

可数据清空后，但是部分非空校验显示很难看，所以又用 clearValidate 清空一下检验，以下为部分关键代码：

    <el-dialog :title="personnelDialogTitle" :visible.sync="personnelDialogFormVisible" class="shopDialog">
<el-form :model="personnelForm" :rules="rules" ref="personnelForm"  label-width="110px">
        <el-form-item label="员工名称：" prop="name">
          <el-input v-model="personnelForm.name" autocomplete="off" placeholder="请输入职位名称"></el-input>
        </el-form-item>
        <el-form-item label="部门：" prop="departmentID">
          <treeselect v-model="personnelForm.departmentID"
                      :options="departmentOptions"
                      :normalizer="normalizer" style="width:320px;line-height: 35px;" placeholder="请选择" />
        </el-form-item>

我的Form 表单绑定的数据是 personnelForm

  /** 空表单数据 */
  function emptyPersonnelForm()
  {
    return {
      name:'',
      departmentID:null,
      // ......
    }
  }
  export default {
    components: { Treeselect },
    data() {
      return {
        personnelForm:emptyPersonnelForm()
		  }
	  }
	}
	
	personnelAdd(){
	this.personnelDialogTitle = '添加人员';
	this.personnelDialogFormVisible = true;
	this.personnelForm = emptyPersonnelForm();  // 使用空表单数据，即清空表单
	setTimeout(() => {this.$refs.personnelForm.clearValidate();}, 10);
	//console.log("emptyPersonnelForm, name:"+this.personnelForm.name+" phone:"+this.personnelForm.phone);
},