preface

Recently, our company is building a background management system, using Vue family bucket and Element-UI. We encountered a problem that required us to deal with a lot of forms, so the solution we came up with is to generate dynamic forms through background configuration, which is also a new challenge for me, involving functions such as dynamic form rendering and verification. So let’s learn how I did it!

This article is just my own idea, if you have a better way to do it, please leave your valuable suggestions below. I would be grateful

The development of preparation

Knowledge points to store

  • Learn about the Element UI form
  • Learn about the $set(target,key,value) method in Vue
  • Learn about forms components in Vant

This project is based on vuE-CLI2.0 scaffolding, here by default we have built, who is for, who is against!

Static form data preparation

The data returned in the background looks like this. Here we take a JSON data example

{
    "showName": "Name"./ / name
    "showValue": null./ / value
    "htmlElements": "Input field".// Form type
    "fieldLength": 99.// Field length
    "requiredOrNot": 1.// Mandatory
}
Copy the code

Then there are probably the following types

  • Input box
  • Text field
  • Calendar control
  • A drop-down box
  • Radio buttons
  • Check box

We generate a component for each type, in the test.vue component

data(){
    return{
        fieldArray: [].// Set of form fields
        fieldObj: {},sex: [{/ / gender
            name:'male'.value:"male"}, {name:"Female".value:"female"}].hobbies: [/ / love
            {
                name:"Eat".value:"Eat"}, {name:"Play the game".value:"Play the game"}, {name:"Beat the beans.".value:"Beat the beans."},].job: [{/ / career
            name:"The doctor".value:"doctor"}, {name:"Teacher".value:"teacher"}, {name:"Drivers".value:"driver"}}}]Copy the code

The purpose of preparing a variety of calendar controls is to use the vant component on the mobile terminal later

Since the data in VUE is bidirectional binding, only the data in data can achieve bidirectional binding, and the data added to data cannot achieve the effect of bidirectional binding. The official website provides a set method for us.

As a pretty boy of me, certainly very intimate for everyone to prepare the official website link

The website links

This blog will focus on dynamic forms.

Vue.set(target,propertyName/index,value)

  • Parameters:

    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value

  • Return value: the value set.

Usage:

Add a property to the reactive object and make sure the new property is also reactive and triggers view updates. It must be used for adding a new property to reactive object, because the Vue cannot detect common new property (such as this. MyObject. NewProperty = ‘hi’)

Note that the object cannot be a Vue instance, or the root data object of the Vue instance.

Element- UI form Element

The website links

Dynamic form rendering

Here we use axios to request local JSON data, static/json/form.json

{
  "data":[
    {
      "showName": "Name"."showValue": null."htmlElements": "Input field"."fieldLength": 10."requiredOrNot": 1."desc":"Please enter your name"
    },
    {
      "showName": "Description"."showValue": null."htmlElements": "Text field"."fieldLength": 99."requiredOrNot": 1."desc":"Please enter a description"
    },
    {
      "showName": "Hobby"."showValue": null."htmlElements": "Check box"."requiredOrNot": 1."desc":"Please choose a hobby."
    },
    {
      "showName": "Gender"."showValue": null."htmlElements": "Checkbox"."requiredOrNot": 1
    },
    {
      "showName": "Date of birth"."showValue": null."htmlElements": "Calendar Control"."requiredOrNot": 1."desc":"Please select date of birth"
    },
    {
      "showName": "Wedding Time"."showValue": null."htmlElements": "Calendar Control"."requiredOrNot": 1."desc":"Please choose when to get married."
    },
    {
      "showName": "Professional"."showValue": null."htmlElements": "Drop-down box"."requiredOrNot": 1."desc":"Please choose an occupation."}}]Copy the code

Test. The vue file

<template> <div> <h2> <el-form :model="fieldObj" ref="ruleForm" label-width="180px" class=" demo-ruleform "> <template V-for ="(item,index) of fieldArray"> <template V-if =" item.htmlelements ===' input box '"> <el-form-item :label="item.showName"> <el-input v-model="fieldObj[item.showName]" :max="item.fieldLength" :placeholder="item.desc" Show-word-limit ></el-input> </el-form-item> </template> <template V-if =" item.htmlelements ===' text field '"> <el-form-item :label="item.showName"> <el-input type="textarea" rows="4" :placeholder="item.desc" v-model="fieldObj[item.showName]" :maxlength="item.fieldLength" show-word-limit></el-input> </el-form-item> </template> <template V-if =" item.htmlelements ===' calendar control '"> <el-form-item :prop=" item.showname ":label=" item.showname "> <el-date-picker v-model="fieldObj[item.showName]" :name="item.showName" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :placeholder="item.desc" ></el-date-picker> </el-form-item> </template> <template v-if="item.htmlElements===' dropbox '"> <el-form-item :label="item.showName"> <el-select v-model="fieldObj[item.showName]" :placeholder="item.describe"> <el-option v-for="items in job" :key="items.name" :label="items.name" :value="items.value"> </el-option> </el-select> </el-form-item> </template> <template V-if =" item.htmlelements ===' single box '"> <el-form-item :label=" item.showname "> <template v-for="(child,index) in sex"> <el-radio v-model="fieldObj[item.showName]" :label="child.value">{{child.name}}</el-radio> </template> </el-form-item> </template> <template V-if =" item.htmlelements ===' checkbox '"> <el-form-item :label="item.showName"> <el-checkbox-group v-model="fieldObj[item.showName]"> <template v-for="(child,index) of hobbies"> <el-checkbox :label="child.name"></el-checkbox> </template> </el-checkbox-group> </el-form-item> </template> </template> </el-form> </div> </template> <script> import axios from 'axios' export default { name: "Test", the data () {return {fieldArray: [], / / form field collection fieldObj: {}, sex: [{/ / gender name: 'male' value: "male"}, {name: "female", Value: "female"}], hobbies: [/ / hobby {name: "eat", value: "eat"}, {name: "play games", the value: "play games"}, {name: "dozen doug," value: "dozen doug"}, ], job: [{/ / the name: "doctor," value: "doctor"}, {name: "teacher," value: "the teacher"}, {name: "the driver," value: "driver"}]}}, mounted(){ this.getFieldData(); }, methods:{getFieldData(){axios.get(".. /static/json/form.json").then(data=>{ let response=data.data.data; this.fieldArray=response; for(let i=0; i<response.length; i++){ let item=response[i]; If (item. HtmlElements = = = 'checkbox) {enclosing $set (enclosing fieldObj, item. ShowName, []); }else { this.$set(this.fieldObj,item.showName,item.showValue); } } }) } } } </script> <style scoped> </style>Copy the code

Now that the form is fully rendered and bidirectional binding is implemented, you need to implement dynamic form validation.

The Form component provides the Form validation function. You need to pass in the rules property and set the form-item prop property to the name of the field to be verified.

  • Prop field
  • rules
  • model

Here rules are set to be dynamic rather than written in advance in data, where you need to know the trigger form of each type

  • Input field/text field trigger: ‘blur’
  • Tick box/check Box/calendar control/drop down trigger: ‘change’

Dynamic form validation

Once you know each form of validation in the form, the file in test.vue becomes

<template>
    <div>
        <h2>Testing dynamic forms</h2>
      <el-form :model="fieldObj" ref="ruleForm" label-width="180px" class="demo-ruleForm">
        <template v-for="(item,index) of fieldArray">
          <template v-if="Item.htmlelements ===' input box '">
            <el-form-item :label="item.showName" :prop="item.showName" :rules="item.requiredOrNot==1? [{required: true, message: 'Please enter '+item.showName, trigger: 'blur'}]:[]">
              <el-input v-model="fieldObj[item.showName]" :max="item.fieldLength"
                        :placeholder="item.desc" show-word-limit ></el-input>
            </el-form-item>
          </template>
          <template v-if="Item.htmlelements ===' text field '">
            <el-form-item :label="item.showName" :prop="item.showName" :rules="item.requiredOrNot==1? [{required: true, message: 'Please enter '+item.showName, trigger: 'blur'}]:[]">
              <el-input type="textarea" rows="4" :placeholder="item.desc" v-model="fieldObj[item.showName]" :maxlength="item.fieldLength" show-word-limit></el-input>
            </el-form-item>
          </template>
          <template v-if="Item.htmlelements ===' calendar control '">
            <el-form-item :prop="item.showName" :label="item.showName" :rules="item.requiredOrNot==1? [{required: true, message: 'Please select '+item.showName, trigger: 'change'}]:[]">
              <el-date-picker v-model="fieldObj[item.showName]" :name="item.showName" type="date"
                              format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :placeholder="item.desc"
              ></el-date-picker>
            </el-form-item>
          </template>
          <template v-if="Item.htmlelements ===' dropdown '">
            <el-form-item  :label="item.showName" :prop="item.showName" :rules="item.requiredOrNot==1? [{required: true, message: 'Please select '+item.showName, trigger: 'change'}]:[]">
              <el-select v-model="fieldObj[item.showName]" :placeholder="item.describe">
                <el-option
                  v-for="items in job"
                  :key="items.name"
                  :label="items.name"
                  :value="items.value">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
          <template v-if="Item.htmlelements ===' checkbox '">
            <el-form-item  :label="item.showName" :prop="item.showName" :rules="item.requiredOrNot==1? [{required: true, message: 'Please select '+item.showName, trigger: 'change'}]:[]">
              <template v-for="(child,index) in sex">
                <el-radio v-model="fieldObj[item.showName]" :label="child.value">{{child.name}}</el-radio>
              </template>
            </el-form-item>
          </template>
          <template v-if="Item.htmlelements ===' checkbox '">
            <el-form-item  :label="item.showName" :prop="item.showName" :rules="item.requiredOrNot==1? [{required: true, message: 'Please select '+item.showName, trigger: 'change'}]:[]">
              <el-checkbox-group v-model="fieldObj[item.showName]">
                <template v-for="(child,index) of hobbies">
                  <el-checkbox :label="child.name"></el-checkbox>
                </template>
              </el-checkbox-group>
            </el-form-item>
          </template>
        </template>
        <div class="text-align">
          <el-button type="primary" @click="submitForm('ruleForm')">Immediately create</el-button>
          <el-button @click="resetForm('ruleForm')">reset</el-button>
        </div>
      </el-form>
    </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "Test".data(){
          return{
            fieldArray: [].// Set of form fields
            fieldObj: {},sex: [{/ / gender
                name:'male'.value:"male"}, {name:"Female".value:"female"}].hobbies: [/ / love
              {
                name:"Eat".value:"Eat"}, {name:"Play the game".value:"Play the game"}, {name:"Beat the beans.".value:"Beat the beans."},].job: [{/ / career
                name:"The doctor".value:"doctor"}, {name:"Teacher".value:"teacher"}, {name:"Drivers".value:"driver"}}},mounted(){
        this.getFieldData();
      },
      methods: {getFieldData(){ // Get dynamic form data
            axios.get(".. /static/json/form.json").then(data= >{
              let response=data.data.data;
              this.fieldArray=response;
              for(let i=0; i<response.length; i++){let item=response[i];
                if(item.htmlElements==='Check box') {this.$set(this.fieldObj,item.showName,[]);
                }else {
                  this.$set(this.fieldObj,item.showName,item.showValue); }}})},submitForm(formName){ // Submit validation
          this.$refs[formName].validate((valid) = > {
            if (valid) {
              console.log('Submit data');
            } else {
              return false; }}); },resetForm(formName) { // Reset the form
          this.$refs[formName].resetFields(); }}}</script>

<style scoped>

</style>

Copy the code

The new additions are:

  • New el-form-item :prop=” item.showname”
  • New rules=” item.requiredorNot ==1? [{required: true, message: ‘Please select ‘+item.showName, trigger: ‘change’}]:[]”
  • New rules=” item.requiredorNot ==1? [{required: true, message: ‘Please enter ‘+item.showName, trigger: ‘blur’}]:[]”
  • Methods added validation methods and methods to reset the form

Vant dynamic form validation

Since PC terminal and mobile terminal are used together, we also realize the function of dynamic form on mobile terminal.

No more nonsense on the number!

Using the test. vue component as an example, for mobile, you first need to install the Vant dependencies, which you already have by default.

Vant website

Dynamic form rendering

Since there is no drop-down box component on the mobile end, but a Picker selector is used instead, then we need to think about a question: how to achieve one-to-one correspondence for multiple pickers? How to deal with it?

Form. json adds a new object, the city, that can be reused

{
    "showName": "City"."showValue": null."htmlElements": "Drop-down box"."requiredOrNot": 1."desc":"Please choose an occupation."
}
Copy the code

So you have multiple drop-down boxes to solve the problem of multiple pickers.

The Test code of vue

HTML code area

<template>
    <div>
      <h2 class="title">Test vant dynamic forms</h2>
      <van-form @submit="submitClaim">
        <template v-for="(item,index) of fieldArray">
          <template v-if="Item.htmlelements ===' input box '">
            <van-field :maxlength="item.fieldLength" show-word-limit v-model="fieldObj[item.showName]" :name="item.showName" :label="item.showName"/>
          </template>
          <template v-if="Item.htmlelements ===' text field '">
            <van-field rows="2"  autosize :label="item.showName" :name="item.showName" type="textarea"  v-model="fieldObj[item.showName]" :maxlength="item.fieldLength" show-word-limit/>
          </template>
          <template v-if="Item.htmlelements ===' calendar control '">
            <van-field :name="item.showName" is-link :label="item.showName" :readonly="true" v-model="fieldObj[item.showName]" />
          </template>
          <template v-if="Item.htmlelements ===' checkbox '">
            <van-field :name="item.showName" :label="item.showName">
              <template #input>
                <van-checkbox-group v-model="fieldObj[item.showName]" direction="horizontal">
                  <template v-for="(child,index) of hobbies">
                    <van-checkbox :name="child.value">{{child.name}}</van-checkbox>
                  </template>
                </van-checkbox-group>
              </template>
            </van-field>
          </template>
          <template v-if="Item.htmlelements ===' checkbox '">
            <van-field :name="item.showName" :label="item.showName">
              <template #input>
                <van-radio-group v-model="fieldObj[item.showName]" direction="horizontal">
                  <template v-for="(child,index) of sex">
                    <van-radio :name="child.value">{{child.name}}</van-radio>
                  </template>
                </van-radio-group>
              </template>
            </van-field>
          </template>
          <template v-if="Item.htmlelements ===' dropdown '">
            <van-field :name="item.showName" is-link :label="item.showName"  :readonly="true" v-model="fieldObj[item.showName]"/>
          </template>
        </template>
      </van-form>
    </div>
</template>
Copy the code

JavaScript code area

  import axios from 'axios'
    export default {
        name: "Test".data(){
          return{
            fieldArray: [].// Set of form fields
            fieldObj: {},sex: [{/ / gender
              name:'male'.value:"male"}, {name:"Female".value:"female"}].hobbies: [/ / love
              {
                name:"Eat".value:"Eat"}, {name:"Play the game".value:"Play the game"}, {name:"Beat the beans.".value:"Beat the beans."},]}},mounted(){
        this.getFieldArray();
      },
      methods: {getFieldArray(){  // Get json data for the local dynamic form configuration
             axios.get(".. /.. /static/json/form.json").then(data= >{
               let response=data.data.data;
               this.fieldArray=response;
               for(let i=0; i<response.length; i++){let item=response[i];
                 if(item.htmlElements==='Check box') {this.$set(this.fieldObj,item.showName,[]);
                 }else {
                   this.$set(this.fieldObj,item.showName,item.showValue); }}})},submitClaim(taskInfo){}}}Copy the code

Now the basic realization of input box, text field, single box, check box value bidirectional binding, the next step is to solve the multiple calendar box and drop-down box value one-to-one correspondence.

Calendar boxes and pop-up layers are v-model controlled to show and hide, so just know the number of calendar boxes and pop-up layers, then loop through the processing, getFieldArray method to process again

axios.get(".. /.. /static/json/form.json").then(data= >{
    let response=data.data.data;
    this.fieldArray=response;
    for(let i=0; i<response.length; i++){let item=response[i];
        if(item.htmlElements==='Check box') {this.$set(this.fieldObj,item.showName,[]);
        }else if(item.htmlElements==='Calendar Control') {this.$set(this.dateObj,item.showName,false); // All calendar controls are hidden
            this.$set(this.fieldObj,item.showName,item.showValue);
        }else if(item.htmlElements=='Drop-down box') {this.$set(this.fieldObj,item.showName,item.showValue);
            this.$set(this.dropDownObj,item.showName,false); // All pop-up layers are hidden first
        }else {
            this.$set(this.fieldObj,item.showName,item.showValue); }}})Copy the code

Add dateObj object to data

dateObj:{},// Control the date display hide
Copy the code
Working with calendar controls

HTML added related content

 <van-field :name="item.showName" is-link :label="item.showName" :readonly="true" v-model="fieldObj[item.showName]" @click="dateObj[item.showName]=true"/>
<template v-for="(item,key,index) of dateObj">
   <van-calendar v-model="dateObj[key]" @confirm="(date)=>onConfirmTime(date,item,key)"/>
 </template>
Copy the code

Methods New methods

onConfirmTime(date,item,key){ // Calendar control
    this.fieldObj[key]=this.formatDate(date);
    this.dateObj[key]=false;
},
formatDate(date) {  // Format the date
    let year=date.getFullYear();
    let month=date.getMonth()+1;
    let day=date.getDate();
    if(month<10){
        month='0'+month;
    }
    if(day<10){
        day='0'+day;
    }
    return `${year}-${month}-${day}`;
},
Copy the code

Use v-Model to bind the pre-written date object dateObj, and then iterate over the object to control the show hide of each calendar control.

Bind the corresponding key value so that it can get the corresponding value after each calendar object is clicked.

Handle drop-down boxes

Add the dropDownObj object, dropDownTempObj object, and dropDownMap map object in data

dropDownObj:{},// The display of the control drop-down box is hidden
dropDownTempObj: {},// Drop - down box object for picker values
dropDownMap:new Map(),
Copy the code

Mounted Life cycle added

this.dropDownMap.set("Professional"["The doctor"."Teacher"."Drivers"]);
this.dropDownMap.set("City"["Beijing"."Shanghai"."Guangzhou"."Shenzhen"])
Copy the code

Added HTML content to the page

<van-field :name="item.showName" is-link :label="item.showName"  :readonly="true" v-model="fieldObj[item.showName]" @click="dropDownObj[item.showName]=true"/>
<template v-for="(item,key,index) of dropDownObj">
    <van-popup v-model="dropDownObj[key]" position="bottom" :style="{width: '100%'}">
        <van-picker show-toolbar  @confirm="(value)=>onConfirmDropdown(value,key)" @cancel="dropDownObj[key]=false" :columns="handleData(dropDownTempObj[key])"/>
    </van-popup>
</template>
Copy the code

Methods Added related methods

onConfirmDropdown(value,key){  // Select data from the drop-down box
  this.dropDownObj[key]=false;
  this.fieldObj[key]=value;
},
handleData(key){ // Drop down box to get each configuration item
  return this.dropDownMap.get(key);
},
Copy the code

GetFieldArray method overridden

axios.get(".. /.. /static/json/form.json").then(data= >{
    let response=data.data.data;
    this.fieldArray=response;
    for(let i=0; i<response.length; i++){let item=response[i];
        if(item.htmlElements==='Check box') {this.$set(this.fieldObj,item.showName,[]);
        }else if(item.htmlElements==='Calendar Control') {this.$set(this.dateObj,item.showName,false); // All calendar controls are hidden
            this.$set(this.fieldObj,item.showName,item.showValue);
        }else if(item.htmlElements=='Drop-down box') {this.$set(this.fieldObj,item.showName,item.showValue);
            this.$set(this.dropDownObj,item.showName,false); // All pop-up layers are hidden first
            this.$set(this.dropDownTempObj,item.showName,item.showName);
        }else {
            this.$set(this.fieldObj,item.showName,item.showValue); }}})Copy the code

Final effect

It can be seen that all data are finally bidirectional binding. The data submitted to the background is the data in the form, and it can also be obtained completely. Finally, the verification function of the form needs to be realized.

Dynamic form validation

Validation for input fields and text fields is simple, and you just need to add the Required and rules validation rules

Input fields and text fields

<van-field
 :required="item.requiredOrNot==1? true:false":maxlength="item.fieldLength" show-word-limit v-model="fieldObj[item.showName]" :name="item.showName" :label="item.showName"  :rules="[{required: true, message: 'Please fill in '+ item.showname}]"/>
Copy the code

In this way, the validation of input fields and text fields is basically realized. As for the validation of other form types, the author is still studying

Vant dynamic forms handle all the code

HTML snippet

<van-form @submit="submitClaim">
    <template v-for="(item,index) of fieldArray">
        <template v-if="Item.htmlelements ===' input box '">
            <van-field :maxlength="item.fieldLength" show-word-limit v-model="fieldObj[item.showName]" :name="item.showName" :label="item.showName"/>
        </template>
        <template v-if="Item.htmlelements ===' text field '">
            <van-field rows="2"  autosize :label="item.showName" :name="item.showName" type="textarea"  v-model="fieldObj[item.showName]" :maxlength="item.fieldLength" show-word-limit/>
        </template>
        <template v-if="Item.htmlelements ===' calendar control '">
            <van-field :name="item.showName" is-link :label="item.showName" :readonly="true" v-model="fieldObj[item.showName]" @click="dateObj[item.showName]=true"/>
        </template>
        <template v-if="Item.htmlelements ===' checkbox '">
            <van-field :name="item.showName" :label="item.showName">
                <template #input>
                    <van-checkbox-group v-model="fieldObj[item.showName]" direction="horizontal">
                        <template v-for="(child,index) of hobbies">
                            <van-checkbox :name="child.value">{{child.name}}</van-checkbox>
                        </template>
                    </van-checkbox-group>
                </template>
            </van-field>
        </template>
        <template v-if="Item.htmlelements ===' checkbox '">
            <van-field :name="item.showName" :label="item.showName">
                <template #input>
                    <van-radio-group v-model="fieldObj[item.showName]" direction="horizontal">
                        <template v-for="(child,index) of sex">
                            <van-radio :name="child.value">{{child.name}}</van-radio>
                        </template>
                    </van-radio-group>
                </template>
            </van-field>
        </template>
        <template v-if="Item.htmlelements ===' dropdown '">
            <van-field :name="item.showName" is-link :label="item.showName"  :readonly="true" v-model="fieldObj[item.showName]" @click="dropDownObj[item.showName]=true"/>
        </template>
    </template>
    <van-button  type="info" round  native-type="submit" :style="{width:'100%',marginTop:'15px'}">submit</van-button>
</van-form>
<template v-for="(item,key,index) of dateObj">
    <van-calendar v-model="dateObj[key]" @confirm="(date)=>onConfirmTime(date,item,key)"/>
</template>
<template v-for="(item,key,index) of dropDownObj">
    <van-popup v-model="dropDownObj[key]" position="bottom" :style="{width: '100%'}">
        <van-picker show-toolbar  @confirm="(value)=>onConfirmDropdown(value,key)" @cancel="dropDownObj[key]=false" :columns="handleData(dropDownTempObj[key])"/>
    </van-popup>
</template>
Copy the code

JavaScript snippets

import axios from 'axios'
export default {
    name: "Test".data(){
        return{
            fieldArray: [].// Set of form fields
            fieldObj: {},sex: [{/ / gender
                name:'male'.value:"male"}, {name:"Female".value:"female"}].hobbies: [/ / love
                {
                    name:"Eat".value:"Eat"}, {name:"Play the game".value:"Play the game"}, {name:"Beat the beans.".value:"Beat the beans."},].dateObj: {// Control the date display hide

            },
            dropDownObj: {// The display of the control drop-down box is hidden

            },
            dropDownTempObj: {// Drop - down box object for picker values

            },
            dropDownMap:new Map(),}},mounted(){
        this.getFieldArray();
        this.dropDownMap.set("Professional"["The doctor"."Teacher"."Drivers"]);
        this.dropDownMap.set("City"["Beijing"."Shanghai"."Guangzhou"."Shenzhen"])},methods: {getFieldArray(){  // Get json data for the local dynamic form configuration
            axios.get(".. /.. /static/json/form.json").then(data= >{
                let response=data.data.data;
                this.fieldArray=response;
                for(let i=0; i<response.length; i++){let item=response[i];
                    if(item.htmlElements==='Check box') {this.$set(this.fieldObj,item.showName,[]);
                    }else if(item.htmlElements==='Calendar Control') {this.$set(this.dateObj,item.showName,false); // All calendar controls are hidden
                        this.$set(this.fieldObj,item.showName,item.showValue);
                    }else if(item.htmlElements=='Drop-down box') {this.$set(this.fieldObj,item.showName,item.showValue);
                        this.$set(this.dropDownObj,item.showName,false); // All pop-up layers are hidden first
                        this.$set(this.dropDownTempObj,item.showName,item.showName);
                    }else {
                        this.$set(this.fieldObj,item.showName,item.showValue); }}})},onConfirmTime(date,item,key){ // Calendar control
            this.fieldObj[key]=this.formatDate(date);
            this.dateObj[key]=false;
        },
        onConfirmDropdown(value,key){  // Select data from the drop-down box
            this.dropDownObj[key]=false;
            this.fieldObj[key]=value;
        },
        handleData(key){ // Drop down box to get each configuration item
            return this.dropDownMap.get(key);
        },
        formatDate(date) {  // Format the date
            let year=date.getFullYear();
            let month=date.getMonth()+1;
            let day=date.getDate();
            if(month<10){
                month='0'+month;
            }
            if(day<10){
                day='0'+day;
            }
            return `${year}-${month}-${day}`;
        },
        submitClaim(taskInfo){
            console.log(taskInfo); }}}Copy the code

conclusion

Overall dynamic form of comprehensive processing difficulty is not great, need is how to deal with data, and, of course, the deficiency is not handling of file upload, code optimization degree was not well done, v – inside for a lot of v – if, whether can use the individual components, these are to be issue to consider.

At the end

If you think this blog is helpful to you, remember to give the author three lien, like 👍👍👍, pay attention to, collect, your support is the biggest power on my writing road, we will see you in the next article.