JavaScript代码区
import axios from 'axios' export default { name: "Test", data(){ return{ fieldArray:[],// 表单字段集合 fieldObj:{}, sex:[{ // 性别 name:'男', value:"male" },{ name:"女", value:"female" } ], hobbies:[ // 爱好 { name:"吃饭", value:"吃饭" },{ name:"玩游戏", value:"玩游戏" },{ name:"打豆豆", value:"打豆豆" }, ], } }, mounted(){ this.getFieldArray(); }, methods:{ getFieldArray(){ // 获取本地动态表单配置json数据 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==='复选框'){ this.$set(this.fieldObj,item.showName,[]); }else { this.$set(this.fieldObj,item.showName,item.showValue); } } }) }, submitClaim(taskInfo){ } } }现在的话基本实现了输入框，文本域，单选框，复选框的值双向绑定，下一步是解决多个日历框和下拉框的取值一一对应。
日历框和弹出层都是通过v-model来控制显示和隐藏，所以只需知道日历框和弹出层的个数，然后循环遍历处理就可以了，getFieldArray方法重新处理
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==='复选框'){ this.$set(this.fieldObj,item.showName,[]); }else if(item.htmlElements==='日历控件'){ this.$set(this.dateObj,item.showName,false); // 日历控件全部先隐藏 this.$set(this.fieldObj,item.showName,item.showValue); }else if(item.htmlElements=='下拉框'){ this.$set(this.fieldObj,item.showName,item.showValue); this.$set(this.dropDownObj,item.showName,false); // 弹出层全部先隐藏 }else { this.$set(this.fieldObj,item.showName,item.showValue); } } })data数据里面新增 dateObj对象
dateObj:{},// 控制日期的显示隐藏 处理日历控件页面html新增相关内容
<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>methods新增方法
onConfirmTime(date,item,key){ // 日历控件 this.fieldObj[key]=this.formatDate(date); this.dateObj[key]=false; }, formatDate(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}`; },使用v-model绑定提前写好的日期对象dateObj，然后遍历对象来控制每一个日历控件的显示隐藏。
绑定对应的key值，这样就可以达到获取每一个日历对象点击之后对应的值。
处理下拉框data里面新增dropDownObj对象，dropDownTempObj对象，dropDownMap map对象
dropDownObj:{},// 控制下拉框的显示隐藏 dropDownTempObj:{},// 下拉框对象，用于picker里面的值 dropDownMap:new Map(),mounted生命周期里面新增
this.dropDownMap.set("职业",["医生","老师","司机"]); this.dropDownMap.set("城市",["北京","上海","广州","深圳"])