ResetFields () doesn’t clear all forms, so I’m going to take a closer look at how the BGM method doesn’t clear all forms, as they say.

ResetFields () resetFields()

The official Element UI documentation states that methods are called without arguments;

[PS: Element UI official address: element.eleme.cn/#/zh-CN/com…]

Form Methods

The method name instructions parameter
validate A method that validates the entire form, taking a callback function. The callback function is called after the verification is complete, passing in two parameters: whether the verification succeeded and the field that failed. If the callback function is not passed in, a Promise is returned Function(callback: Function(boolean, object))
validateField A method that validates part of a form field Function(props: array | string, callback: Function(errorMessage: string))
resetFields Reset the entire form, resetting all field values to their original values and removing validation results –
clearValidate Removes validation results for form entries. Pass the prop property or prop array of the form item to be removed, or remove the validation result of the entire form if it is not passed Function(props: array | string)

If you define an object, some of the parameters defined in the object must be assigned their initial values, such as the following code:

    classForm: {
          id:' '.className:' '.parentId:'0'.des:' ',},Copy the code

When you use the resetFields() method, it is naturally initialized to the initial value, i.e. ParentId = ‘0’; So to really empty everything, you can initialize the object again after executing the resetFields() method, for example: Do you want to empty the initial value parentId = ‘0’, but generally will not exist the situation, for the purpose of initialization is page load the default values, when the form of partial refresh the page again, or reset the form after operation, change the default value, the operation of the personal god says this general occurrence probability is very low, but does not rule out no. Well, I haven’t. What do you think?

methods:{
    resetForm(formName) {
          this.$refs[formName].resetFields(); // Remove form validation prompt + initialize form data}},mounted: function() {
    let self = this;
    $("#modal-edit").on("hide.bs.modal".function() {
        self.resetForm('classForm');
        self.classForm = {
         id:' '.className:' '.parentId:' '.des:' ',}}); }Copy the code

Then I’ll explain, when does the resetFields() method work?

El-form needs to be bound to Model and used in conjunction with el-Form-Item. The form must have ref and prop bound to the EL-Form-Item. The resetField method must work, and the Model received must be an object. For example, the classForm defined above.

<el-form :model="classForm" :rules="rules" ref="classForm" >
          <el-form-item label="Name" prop="className">
            <el-input v-model="classForm.className" placeholder="Please enter category name"></el-input>
          </el-form-item>
          <el-form-item label="Description"  prop="des">
            <el-input type="textarea" v-model="classForm.des" ></el-input>
          </el-form-item>
</el-form>
Copy the code

This is my basic summary of this method, if there is something wrong, or more elegant writing method, welcome to leave a comment below!

In addition, if you have any questions about element UI form verification, you can watch my other article, which is detailed and specific, hoping to help you in need

Blog.csdn.net/weixin_4397…

If an article has helped you, give it a “like” in the upper right corner or at the bottom of the article. (the better we understand you, the better we understand you

If you like this post shared by the big White rabbit, please click on it! (๑ ‘ᴗ ‵ ๑) づ ╭ ❤ ~

If you have any questions about this article, please leave a comment below or join us [Group id: 708072830].

In view of the limited personal experience, all views and technical research points, if you have any objection, please directly reply to the discussion (do not make offensive remarks)