We see many examples of said resetFields () does not clear all forms ah, today I came good example of this comes with a detailed talk about bgm way in the end is not like the rumors as they can not be completely emptied form it?
First, tell us about resetFields () usage and role in the matter:
In the element ui official document inside ah it is so described: Call method does not require parameters;
[Ps: element ui official website address: https://element.eleme.cn/#/zh-CN/component/form ]
Form Methods
| Method name | Explanation | parameter |
|---|---|---|
| validate | A method for checking the entire form, a callback parameter. The callback function will be after the end of the check calls, passing two parameters: Verify the successful and failed the check fields. If passed callback function will return a promise | Function(callback: Function(boolean, object)) |
| validateField | Methods section of the form fields check | Function(props: array | string, callback: Function(errorMessage: string)) |
| resetFields | Reset the entire form, all field values reset to the initial value, and the verification results removed | — |
| clearValidate | Table remove the check result item. prop property of the incoming item of the table to be removed or array prop composition, such as the removal of the check result does not pass the entire form | Function(props: array | string) |
Like so many small partners said, have ignored the truth of a thing, if you noticed, the document said that inside is reset to the initial value, you define an object, then the object is defined in the various parameters is certainly some It will be assigned an initial value, such as the following code:
classForm: {
id:'',
className:'',
parentId:'0',
des:'',
},When you use resetFields () method, naturally is initialized to an initial value, i.e. parentId = '0'; if we really want all of it is cleared, then you can, once again to the object after performing initialization resetFields () method, For example: you want to clear initial value parentId = '0', but generally do not exist in this case, since the purpose is to initialize the page loads the default values, when there are the partial refresh form pages or forms the reset operation again and so on, to modify the default value, the probability of this individual represents God appeared normal operation is still very low, but does not rule does not, anyway, I have not encountered before. You think they do?
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:'',
}
});
}Then I come to explain, resetFields () method when used can play a role?
el-formNeed to bind model, and need to meet el-form-itemused together, Form1 ref must have properties , and el-form-itembinding on propthe properties, resetFieldthe method to work, but needs to receive an object model, such as defined above 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>These are my basic summary of this method, and if there is something wrong place, or more elegant wording, welcome to leave a message below!
In addition, there is little question about the partnership element ui form validation, I can watch another article, written in detail, hoping to help those in need of a small partner
https://blog.csdn.net/weixin_43970743/article/details/102500272
