Shulou(Shulou.com)06/02 Report--

Vue+ElementUI how to deal with oversized forms, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

Recently, due to the adjustment of the business, the logic of the previous super-long form has changed a lot, so I intend to restructure it (previously, it was written by an outgoing background, there are no comments, and a component has written 4000 + lines, which is really powerless). In order to make it easier for you to read, I have divided 14 components in the project and streamlined them.

Overall thinking

Large forms are split according to business modules.

Use the validate method provided by el-form to verify when saving (check each split component in a loop)

Mixin's common extraction of each component (also conducive to the maintenance of later projects)

Start

Here, take the split of two components as an example: form1, form2 (convenient for readers to watch, name do not spray)

Here are two components: why ref and model are bound by form will be explained later (for later maintenance)

/ / form1 component export default {name: 'Form1', props: {form: {}}, data () {return {rules: {name: [{required: true, message:' please enter a name', trigger: 'blur'}]} Methods: {/ / this is for checking validForm () {let result = false this.$refs.form.validate (valid = > valid & & (result = true)) return result} / / I wrote it in another way here. But when the loop is checked, it is the promise object. If there is a problem, I hope the bosses will point out one or two validForm () {/ / it is clear that the output structure here is the Boolean value, but after the parent component loop call, it is the promise type. Need to convert return this.$refs.form.validate () .catch (e = > console.log (e))}} / / form2 component export default {name: 'Form2', props: {form: {}}, data () {return {rules: {name: [{required: true Message: 'please enter age', trigger: 'blur'}]}}, methods: {/ / this is to verify validForm () {let result = false this.$refs.form.validate (valid = > valid & & (result = true)) return result} for the parent component to call iteratively.

Take a look at how the parent component references

/ / parent component reported an error. Omit the reference to export default {name: 'parent',. Omit registration of data () {return {formData: {form1: {}, form2: {}},}

Since the attribute names form1 and form2 in formData are used on the ref of the subform component, you can find them in turn during traversal, and modify the save function 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 verification method of each form const valids = formKeys.map (item = > this.$ refs [item] .validForm ()) / / logical if (valids.every (item = > item)) {console.log (11)} after all forms pass the verification. }} answer why the two components ref, Model binds to form.

By comparison, we can find that form1 form2 has a 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}

Just reference the minix in form1 form2 and delete the corresponding properties and methods in the corresponding component.

Oversized forms are troublesome to solve, and this is just a split of the components

The linkage between components is also a major difficulty, which will be sent out next time after finishing.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.