element表单el-form的resetFields四种失效情况的解决方法汇总

<el-dialog :visible.sync="dialogFormVisible" >
  <el-form ref="Form" :model="brand" >
    <el-form-item label="品牌名称" >
      <el-input v-model="brand.brandName" ></el-input>
    </el-form-item>
    <el-form-item label="排序" >
      <el-input v-model="brand.ordered"></el-input>
    </el-form-item>
    <el-form-item label="备注" >
      <el-input v-model="brand.description"></el-input>
    </el-form-item>
  </el-form>
</el-dialog>

reset(){
    this.$refs.Form.resetFields();
}

该组件原本设置的是 当提交表单并成功返回后，使用resetFields()函数进行整个表单的清空以便下一次输入。

然而在测试中发现，该函数并没有正确的运行。查找了关于resetFields()函数会遇到的问题及其解决方法，总结如下：

1.resetFields()会将表单重置为“初始值”。这个初始值在form的mounted生命流程时候就确定下来，如果创建表单时候就有默认值（例如功能为编辑表单而不是新建表单时），则无法置空而是reset为该默认值。

解决方法：（参考Vue3 | Element Plus resetFields不生效_yimtcode的博客-CSDN博客）

1. 先对form表单界面进行渲染，完成初始化，以防止将要显示的数据当成默认值。
2. 使用nextTick在下一个DOM再执行数据更新，把数据更新上已经显示的对话框。

const editDialog = () => {
//先进行表单的渲染
  dialogFormVisible.value = true;

  nextTick(() => {
// 在此进行数据更新操作
    let user = {
//模拟数据更新
      'username': 'yimtcode',
      'password': '123456'
    }
    Object.assign(formData.value, user);
  })
}


​

2.<el-form>内没有绑定校验规则，会导致resetFields()失效！【题主就是在这卡住了】

官方文档对resetFields()方法的描述是：对该表单项进行重置，将其值重置为初始值并移除校验结果。因此缺乏校验规则会导致方法内部bug。

解决方法：

加上校验规则部分就能正常重置了。':rules'指定对应规则，prop指定规则所限定的字段。并在data()里补充校验规则部分（此处略去不写）。

<el-form ref="Form" :model="brand" :rules="rules" >
    <el-form-item label="品牌名称" >
        <el-input v-model="brand.brandName" prop="brandName"></el-input>
    </el-form-item>
    <el-form-item label="排序" >
        <el-input v-model="brand.ordered" prop="ordered"></el-input>
    </el-form-item>
    <el-form-item label="备注" >
        <el-input v-model="brand.description" prop="description"></el-input>
    </el-form-item>
</el-form>

3.<el-form>内需要指定ref属性，并且必须绑定model；在调用resetFields()时候使用绑定的ref属性来调用；

reset(){
    this.$refs.Form.resetFields();
}

4.prop中的字段要和v-model中的字段对应上。