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.