Code address: gitee.com/wyh-19/supe… This code branch: Essay-10

Series of articles:

  • Vue + Element Large Forms solution (1)– Overview
  • Vue + Element Large Forms solution (2)– Form splitting
  • Vue + Element Large Forms Solution (3)– Anchor Components (part 1)
  • Vue + Element Large Form Solution (4)– Anchor Component (2)
  • Vue + Element Large Forms solution (5)– Validation identifier
  • Vue + Element Large Forms solution (6)– Automatic identification
  • Vue + Element Large Forms solution (7)– Form form
  • Vue + Element Large Form Solution (8)– Data comparison (1)
  • Vue + Element Large Form Solution (9)– Data comparison (2)
  • Vue + Element Large Forms solution (10)– Form communication and dynamic forms

preface

The essence of the large form solution is to split the large form into subforms, as fully illustrated in the Form Splitting section. Much of the rest is written about additional requirements I encountered in my practice, such as auxiliary anchor tools, data comparison, etc. In practice, not only those simple forms in the demonstration, but also some complex scenes. For example, some fields have linkage interaction. When fields are scattered in different subforms, subform communication is involved. There are also subforms that may change dynamically. This article combines field linkage with dynamic forms for complex form practice.

Subform communication

The essence of subform communication is communication between components, but there will be some optimized and standardized places in the design scheme of the form splitting, so as to simplify and reduce boilerplate code. For example, if form1.vue selects the degree field, it needs to notify form2.vue of the selection result. The normal practice is to pass the changed degree value to the master form index.vue, which is then passed to form2.vue for its use. The master form index.vue becomes the data transfer channel between sub-forms. If there are too many fields linked between sub-forms, the maintenance of each field in index.vue becomes messy. In practice, the whole communication process remains the same, except that I have managed these fields. The complete code process is as follows:

  1. Add the change event to form1.vue to pass data up
<el-select v-model="formData.education"
           v-compare:education.map="{oldFormData,map:composeOptions(educationList)}"
           @change="$emit('field-change','education',$event)">
    <el-option v-for="item in educationList" :key="item.value" :value="item.value"
           :label="item.label"></el-option>
</el-select>
Copy the code
  1. In index.vue, add form1 componentfield-changeEvent handler function, and added in datalinkChannel: {}, this field is used to manage all linkage fields and willlinkChannelPass to all subform components
.<! -- Add field change event and link-channel attribute -->
<form1 ref="form1" form-key="form1" :data="formDataMap" :old-data="oldFormDataMap"
       :link-channel="linkChannel" @validate="handleValidate"
       @field-change="handleFieldChange" />.<form2 ref="form2" form-key="form2" :data="formDataMap" :old-data="oldFormDataMap"
       :link-channel="linkChannel" @validate="handleValidate" />
Copy the code
methods: {
    handleFieldChange(key, value) {
        this.$set(this.linkChannel, key, value)
    },
    ...
}
Copy the code
  1. Added in super-form-mixinlinkChannelThis props allows all subforms to accept the prop
props:{
    ...
    linkChannel: {
      type: Object.default: () = >({})}}Copy the code
  1. In form2.vue, add a listener on the target field to implement the required logic, which is simply printed here
 watch: {
    'linkChannel.education': {
      handler(v) {
        console.log(v)
      }
    }
}
Copy the code

In practice, all field linkage is maintained in linkChannel, which, as its name suggests, is the channel for linkage communication between sub-forms.

The dynamic form

Sometimes in the form of dynamically add or delete, such as increasing the business scenario as follows: add a child form is used to fill in the user’s work history, can add the past work information, dynamic and relevant field calibration, including the company name is required, and the department of SiLing less than 10 months, leaving reason required, the following to implement these requirements.

  1. Design fields in index.vue and handle form grouping
// initializes data in data
 formDataMap: this.resolveDataToMap({
    name: ' '.age: undefined.education: undefined.gender: undefined.hobby: [].company: ' '.// Add a resume field
    workList: {}}),// add form3 grouping to resolveDataToMap
resolveDataToMap(data) {
  const form1 = {
    name: data.name,
    age: data.age,
    education: data.education,
    gender: data.gender,
    hobby: data.hobby
  }
  const form2 = {
    company: data.company
  }
  / / add form3
  const form3 = {
    workList: data.workList
  }
  return {
    form1,
    form2,
    form3
  }
},
Copy the code
  1. Add form3. Vue
<template>
  <el-form ref="form" :model="formData" :disabled="formDisabled" :rules="rules" label-width="80px"
           size="small" @validate="handleValidate">
    <el-button type="primary" size="small" @click="handleAdd">increase</el-button>
    <div v-for="(item,index) in formData.workList" :key="index">
      <el-button size="mini" @click="handleRemove(index)">delete</el-button>
      <el-form-item label="The company" prop="company" class="field-wrapper">
        <el-input v-model="item.company" />
      </el-form-item>
      <el-form-item label="SiLing" class="field-wrapper">
        <el-input-number v-model="item.month" />
        <span>(months)</span>
      </el-form-item>
      <el-form-item label="Reasons for leaving" prop="reason" class="field-wrapper">
        <el-input v-model="item.reason" />
      </el-form-item>
    </div>
  </el-form>
</template>
Copy the code
<script>
import SuperFormMixin from '@/mixins/super-form-mixin'
export default {
  name: 'Form3'.mixins: [SuperFormMixin],
  data() {
    return {
      rules: {
        company: [{required: true.message: 'Please enter company name'.trigger: ['change'.'blur']}],reason: [{required: true.message: 'Please enter reason for leaving'.trigger: ['change'.'blur']}]}}},methods: {
    handleAdd() {
      this.formData.workList.push({})
    },
    handleRemove(i) {
      this.formData.workList.splice(i, 1)
    }
  }
}
</script>
Copy the code

The above code implements the basic page structure requirements as follows:

At this point, the additions and deletions are normal, but the verification has problems. First the company entered the name, still prompted to enter; Secondly, the reason for leaving is to determine whether the verification is needed dynamically according to the age of the department. Let’s analyze and solve these two problems.

When a prop is specified for a formItem in a normal form (for example, form2), the form component finds the value of the field in the Model based on the prop and checks it against rules that match the prop. This is no longer an ordinary form, but a circular dynamic form. To make the form component find the value of a certain item, it needs to give it a complete path and specify a separate verification rule. Modify the code of the company item as follows:

<el-form-item label="The company" :prop="`workList.${index}.company`" :rules="rules.company" class="field-wrapper">
    <el-input v-model="item.company" />
</el-form-item>
Copy the code

${index}. Company = workList.${index}. Company = workList.${index}. Company = workList. Similarly, the dimission reason check rule is dynamic, and the modified code is as follows:

<el-form-item label="Reasons for leaving" :prop="`workList.${index}.reason`"
              :rules="item.month <10 ? rules.reason:{}" class="field-wrapper">
    <el-input v-model="item.reason" />
</el-form-item>
Copy the code

At this point, the verification logic of the dynamic form has been normally realized, and the effect is shown in the following figure. When the company age is less than 10 months, the reason for leaving is mandatory:

When all the checks pass, the following data is displayed:

Afterword.

Originally, I planned to write the data comparison of dynamic forms, but in practice, it is really too complicated and involves a lot of preparatory work. I always want to write but I don’t know how to do it (I may make it up one day…). . In the future, react will be used as the main technology stack due to work changes. However, THIS year’s study and use of VUE has been the most fruitful one for me. Through the preparation of this series of articles, I have also accumulated a lot of experience, one of the biggest is this kind of hand in hand practice series of articles is really easy to write more water, will mainly write inductive summary class and principle analysis class article. At this point, the series is finished.