element-ui 之Form表单&&resetFields()用法
看到很多例子说resetFields()并不能清空所有的表单啊，今天我就来好好的举个例子详细的说说这个自带bgm的方法到底是不是像他们传言的那样， 不能完全清空表单呢？
首先介绍一下 resetFields() 的用法及作用事项：
在element ui 官方文档里头啊是这么介绍的:调用方法不需要参数；
【ps：element ui 官网地址： element.eleme.cn/#/zh-CN/com…】
Form Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean, object)) |
| validateField | 对部分表单字段进行校验的方法 | Function(props: array | string, callback: Function(errorMessage: string)) |
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | — |
| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 | Function(props: array | string) |
所以像很多小伙伴所说的那样，都忽略了一个事情的真相，大家注意到没有，文档里头都说是重置为初始值，你定义一个对象，那么对象中定义的各种参数有些肯定是会被赋予初始值，比如如下代码：
classForm: { id:'', className:'', parentId:'0', des:'', }, 复制代码当你使用 resetFields() 方法，自然是被初始化成初始值，即parentId = ‘ 0 ’；所以要想真正全部被清空，那么你可以在执行 resetFields() 方法之后，再次给该对象进行一次初始化，比如：你想清空 初始值 parentId = ' 0 '，但是一般都不会存在该情况，因为初始化的目的就是页面加载出默认值，当再次有局部刷新表单页面或者表单重置等操作之后，修改默认值，个人表示这种神一般的操作出现的几率还是非常低，但是也不排除没有，反正我是没有遇到过。您们觉得呢？
methods:{ resetForm(formName) { this.$refs[formName].resetFields(); //消除表单验证提示 + 初始化表单数据 }, } mounted: function() { let self = this; $("#modal-edit").on("hide.bs.modal", function() { self.resetForm('classForm'); self.classForm = { id:'', className:'', parentId:'', des:'', } }); } 复制代码然后我再来解释一下，resetFields() 方法 什么时候用能起到作用？
el-form需要绑定 model，并且需要配合el-form-item一起使用，Form必须要有ref属性，并且在el-form-item上绑定prop属性，resetField方法才能起作用，而且 接收的 model 还需是一个对象，例如上面定义的 classForm 。
<el-form :model="classForm" :rules="rules" ref="classForm" > <el-form-item label="名称" prop="className"> <el-input v-model="classForm.className" placeholder="请输入分类名称"></el-input> </el-form-item> <el-form-item label="描述" prop="des"> <el-input type="textarea" v-model="classForm.des" ></el-input> </el-form-item> </el-form> 复制代码
以上就是我对这个方法的基本总结了，如果有不对的地方，或者更优雅的写法，欢迎下方留言！
作者：bug菌
链接：https://juejin.cn/post/7022446914725478431