This article will take you through how Vue ElementUI handles very large forms. I hope it will be helpful to you!

Due to recent business adjustments in the company, the logic of the previous long form has changed a lot, so I plan to reconstruct it (it was written by a background manager who has resigned. , and there are no comments. One component has 4000 lines written, which is really powerless). For your convenience, I have split the project into 14 components
and simplified them.
Overall idea
- Large forms are split according to business modules
- Use
validate# provided by
el-form when saving ##Method for verification (
Loop to verify each split component)
mixin public extraction of each component (also conducive to the maintenance of later projects)-
[Related recommendation: "
vue.js Tutorial"]
Start
Here we use - to split 2 components
For example:
form1,
form2 (for the convenience of readers, do not use names)
Why are the two components here - ref and model
tied together? The determined ones are all
form will be explained later (for the convenience of later maintenance)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <template>
<el-form
ref= "form"
:model= "form"
label-width= "10px"
>
<el-form-item label= "姓名" 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: '请输入姓名', trigger: 'blur' }
]
}
}
},
methods: {
validForm() {
let result = false
this. $refs .form.validate(valid => valid && (result = true))
return result
}
validForm() {
return this. $refs .form.validate(). catch (e => console.log(e))
}
}
}
</script>
<template>
<el-form
ref= "form"
:model= "form"
label-width= "10px"
>
<el-form-item label= "年龄" 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: '请输入年龄', trigger: 'blur' }
]
}
}
},
methods: {
validForm() {
let result = false
this. $refs .form.validate(valid => valid && (result = true))
return result
}
}
}
</script>
|
Copy after login
Look at how the parent component is referenced1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <template>
<div class = "parent" >
<form1 ref= "form1" :form= "formData.form1" />
<form2 ref= "form2" :form= "formData.form2" />
<el-button type= "primary" @click= "save" >报错</el-button>
</div>
</template>
<script>
... 省略引用
export default {
name: 'parent',
... 省略注册
data () {
return {
formData: {
form1: {},
form2: {}
}
}
},
}
</script>
|
Copy after login
Since the attribute names - form1
and
form2 in
formData are used on the
ref of the subform component respectively, they can be Find them in turn during traversal and modify the save function. The code is as follows:
1 2 3 4 5 6 7 8 9 10 11 12 | methods: {
save () {
const formKeys = Object.keys(this.formData)
const valids = formKeys.map(item => this. $refs [item].validForm())
if (valids.every(item => item)) {
console.log(11)
}
}
}
|
Copy after login
Answer why the two components
ref and model are bound to
form
By comparison we can find that - form1 form2
has common
props methods
We extract it through mixin1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | export default {
props: {
form: {
required: true,
type: Object,
default : () => {}
},
},
methods: {
validForm () {
let result = false
this. $refs .form.validate(valid => valid && (result = true))
return result
}
}
}
|
Copy after login
Reference the - minix
in
form1 form2 and delete the corresponding properties and methods in the corresponding component
End
It is very troublesome to solve the extremely large form. Here we only split the components.- The linkage between components is also a big difficulty. We will send it out after finishing it next time.
- You are welcome to discuss how you solved it in the comment area, and you are also welcome to point out the shortcomings to the author
-
For more programming-related knowledge, please visit:
Introduction to Programming! !
The above is the detailed content of How Vue+ElementUI handles oversized forms. For more information, please follow other related articles on the PHP Chinese website!