当前位置: 首页 > Web前端 > vue.js

如何结合元素快速生成表单

时间:2023-03-31 21:43:12 vue.js

需求:如何快速生成一个表单,不用每次都复制粘贴思路:用过antd或者iView框架的都知道。引用table组件,给一个Column和dataSource,通过遍历循环生成一个table。这也可能吗?给定2个参数来生成表单?答案显然是可行的,于是写了一个FormMain组件快速生成表单代码如下//FormMain.vue//模板

从"./components/FormMain"导入FormMain;导出默认值{名称:“App”,组件:{FormMain},数据(){返回{配置:[{label:"A",type:"input",key:"a",labelWidth:"80px"},{label:"BB",type:"radio",key:"d",data:[{标签:“x”,值:1},{标签:“y”,值:2},{标签:“z”,值:3}]},{标签:“B”,类型:“选择”,键:"b",async:this.asyncData},{label:"C",tip:"ThisisC",type:"input",key:"c"},[{label:"DateRange",类型:"date",key:"beginDate",tip:"如果不填写结束时间,以最近的天数为准;如果填写结束时间,则最近的日期无效"},{label:“结束日期”,类型:“日期”,键:“endDate”}]],数据:{a:1,b:2,c:3,d:1,beginDate:newDate(),结束日期:新日期()}};},方法:{asyncData(){returnnewPromise((resolve,reject)=>{setTimeout(()=>{resolve([{label:"A",value:1},{label:"B",值:2},{标签:“C”,值:3}]);},1000);});}}};支持:selectradio、checkbox异步请求数据标签提示信息,一列多个输入框指定标签宽度,可以点击查看示例演示链接