How to handle super large form examples with Vue+ElementUI

Recently, due to business adjustments in the company, the logic of the previous super-long form has undergone many changes, so I plan to refactor it (it was previously written by a backend staff who has left the company, and there are no comments. One component has 4,000+ lines, and I really don’t have the energy to do it). For your convenience, I have divided the project into 14 components and simplified them.

Overall idea

Large forms are split according to business modules
When saving, use the validate method provided by el-form to verify (loop through each split component)
Mixin is a common extraction of each component (also conducive to the maintenance of later projects)

start

Here we take the splitting of two components as an example: form1, form2 (for the convenience of readers, please do not criticize the naming)

Why the two components here are bound to form, ref and model, will be explained later (for the convenience of later maintenance)

// form1 component <template>
    <el-form
      ref="form"
      :model="form"
      label-width="10px"
    >
      <el-form-item label="Name" prop="name">
          <el-input v-model="form.name" />
      </el-form-item>
    </el-form>
</template>
<script>
export default {
  name: 'Form1',
    props: {
      form: {}
  },
  data() {
    return {
      rules:
        name: [
          { required: true, message: 'Please enter your name', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // Here is to loop the parent component to call the validation validForm() {
        let result = false
        this.$refs.form.validate(valid => valid && (result = true))
        return result
    }
    // I have written it in another way here, but it is a promise object when looping and checking. There is a problem. I hope the big guys can give me some advice. validForm() {
        // The output structure here is obviously a Boolean value, but after the parent component loop call, it is a promise type, which needs to be converted return this.$refs.form.validate().catch(e => console.log(e))
    }
  }
}
</script>
 
// form2 component <template>
    <el-form
      ref="form"
      :model="form"
      label-width="10px"
    >
      <el-form-item label="age" prop="age">
          <el-input v-model="form.age" />
      </el-form-item>
    </el-form>
</template>
<script>
export default {
  name: 'Form2',
  props: {
      form: {}
  },
  data() {
    return {
      rules:
        name: [
          { required: true, message: 'Please enter your age', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // Here is to loop the parent component to call the validation validForm() {
        let result = false
        this.$refs.form.validate(valid => valid && (result = true))
        return result
    }
  }
}
</script>

See how the parent component is referenced

// Parent component <template>
    <div class="parent">
        <form1 ref="form1" :form="formData.form1" />
        <form2 ref="form2" :form="formData.form2" />
        <el-button type="primary" @click="save">Error</el-button>
    </div>
</template>
<script>
... omitting the reference export default {
    name: 'parent',
    ... Omit registration data () {
        return {
            formData: {
                form1: {},
                form2: {}
            }
        }
    },
}
</script>

Since the attribute names form1 and form2 in formData are used in the ref of the subform component respectively, they can be found in turn during traversal and the save function can be modified. The code is as follows:

methods: {
    save () {
        //The key value of each form object, that is, the ref value of each form const formKeys = Object.keys(this.formData)
        // Execute the validation method for each form const valids = formKeys.map(item => this.$refs[item].validForm())
        // Logic after all forms pass validation if (valids.every(item => item)) {
          console.log(11)
        }
    }
}

Why are both ref and model components bound to form?

By comparison, we can find that form1 and form2 have common props methods.
Let's extract it through mixin

export default {
  props: {
    form: {
      required: true,
      type: Object,
      default: () => {}
    },
  },
  methods: {
    validForm () {
      let result = false
      this.$refs.form.validate(valid => valid && (result = true))
      return result
    }
  }
}

Reference the minix in form1 form2, and delete the corresponding properties and methods in the corresponding components.

Conclusion

It is very troublesome to solve the problem of oversized forms. Here we just split the components
The linkage between components is also a big difficulty. I will post it next time after finishing it.

This is the end of this article about how Vue+ElementUI handles super large forms. For more information about how Vue+ElementUI handles super large forms, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Vue basics detailed explanation of ElementUI's form
Vue elementUI form nested table and verification of each row detailed explanation
Example of implementing login effect with vue ElementUI's from form
Vue ElementUI Form form validation
Vue Element-ui form validation rule implementation
Detailed explanation of the use of Element UI form in Vue2

<<: An example of the execution order between the href jump and onclick of the html hyperlink a tag

>>: Implementation of Nginx+ModSecurity security module deployment