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
startHere 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?
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
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:
|
<<: 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
1. CSS file naming conventions Suggestion: Use le...
■ Website theme planning Be careful not to make yo...
Chapter 1 <br />The most important principl...
Copy code The code is as follows: html, address, ...
This article shares the specific code of Vue to i...
Table of contents 1. Basic Use 2. Working Princip...
Preface MySQL query uses the select command, and ...
Method 1: Use the SET PASSWORD command mysql -u r...
Background: position: sticky is also called stick...
What is Virtual Memory? First, I will directly qu...
Linux col command The Linux col command is used t...
[Problem description] Our production environment ...
Table of contents question Server layer and stora...
This article example shares the specific code of ...
1. The color of the scroll bar under xhtml In the ...