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:"打豆豆" }, ], dateObj:{ // 控制日期的显示隐藏 }, dropDownObj:{ // 控制下拉框的显示隐藏 }, dropDownTempObj:{ // 下拉框对象，用于picker里面的值 }, dropDownMap:new Map(), } }, mounted(){ this.getFieldArray(); this.dropDownMap.set("职业",["医生","老师","司机"]); this.dropDownMap.set("城市",["北京","上海","广州","深圳"]) }, 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 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); // 弹出层全部先隐藏 this.$set(this.dropDownTempObj,item.showName,item.showName); }else { this.$set(this.fieldObj,item.showName,item.showValue); } } }) }, onConfirmTime(date,item,key){ // 日历控件 this.fieldObj[key]=this.formatDate(date); this.dateObj[key]=false; }, onConfirmDropdown(value,key){ // 下拉框选中数据 this.dropDownObj[key]=false; this.fieldObj[key]=value; }, handleData(key){ // 下拉框获取每一个配置项 return this.dropDownMap.get(key); }, 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}`; }, submitClaim(taskInfo){ console.log(taskInfo); } } } 总结整体来说动态表单的处理综合难度不算很大，需要的是如何对数据进行处理，当然还有不足之处是没有做到对文件上传的处理，代码的优化程度没有做好，v-for里面写了很多v-if,是否可以使用单独的组件进行处理，这些都是有待需要考虑的问题。
结尾如果觉得本篇博客对您有帮助的话，记得给作者三连，点赞
分类：
vue文章系列技术点：
相关文章：
webpack（11）配置文件分离为开发配置、生成配置和基础配置 2021-07-13
用阻塞队列实现一个生产者消费者模型？synchronized和lock有什么区别？ WEB与游戏开发的一些区别 Flask（5）- 动态路由 『无为则无心』Python函数 — 25、Python中的函数 http连接复用进化论 Git常用命令超级详细（全网最详细） Android系统“资源调度框架” 进来偷学一招，数据归档二三事儿 安卓手机改造服务器——基本环境配置（CentOS7 arm32） [Kick Start] 2021 Round B 对抗样本综述(一) 海量数据Excel报表利器——Eas 2021-07-10
WEB与游戏开发的一些区别 Flask（5）- 动态路由 『无为则无心』Python函数 — 25、Python中的函数 http连接复用进化论 Git常用命令超级详细（全网最详细） Android系统“资源调度框架” 进来偷学一招，数据归档二三事儿 安卓手机改造服务器——基本环境配置（CentOS7 arm32） [Kick Start] 2021 Round B 对抗样本综述(一) 海量数据Excel报表利器——EasyExcel（一 利用反射机制导出Excel） 《面试补习》-熔断降级我学会了！ 2021-07-10
Flask（5）- 动态路由 『无为则无心』Python函数 — 25、Python中的函数 利用C语言将混乱数字排序（即冒泡排序法）（含思路） http连接复用进化论 Git常用命令超级详细（全网最详细） Android系统“资源调度框架” 进来偷学一招，数据归档二三事儿 安卓手机改造服务器——基本环境配置（CentOS7 arm32） [Kick Start] 2021 Round B 对抗样本综述(一) 海量数据Excel报表利器——EasyExcel（一 利用反射机制导出Excel） 《面试补习 2021-07-10
http连接复用进化论 Git常用命令超级详细（全网最详细） Android系统“资源调度框架” 进来偷学一招，数据归档二三事儿 安卓手机改造服务器——基本环境配置（CentOS7 arm32） 对抗样本综述(一) 海量数据Excel报表利器——EasyExcel（一 利用反射机制导出Excel） 《面试补习》-熔断降级我学会了！ 完了，又火一个项目 Vue 两个字段联合校验典型例子--修改密码 ES2021 新特性！ （数据科学学习手札124）pandas 1.3版本主要更新内容一览 动态规划_备忘录 2021-07-10