form-create教程:自定义布局,实现一行多个组件
本文将介绍form-create如何自定义布局,实现一行多个组件
form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。
如果对您有帮助,您可以在 GitHub 上给作者点个"Star" 支持一下 谢谢!
通过设置生成规则的col
配置项可以实现组件的布局
示例1:
[ { type:'input', field:'test-1', title:'col-12', value:'', col:{ span:12 } }, { type:'input', field:'test-2', title:'col-12', value:'', col:{ span:12 } } ]
示例2:
示例中使用的是 ElementUI
当没有设置col
时默认为{span:24}
[ { type: 'el-row', native: true, children: [ { type: 'el-col', props: { span: 12 }, children: [ { type:'datePicker', title: '活动日期', field: 'section_day', value: ['2018-02-20 12:12:12', '2018-03-20 12:12:12'], props:{ type:'datetimerange' } }, { type:'timePicker', title: '活动时间', field: 'section_time', value: ['11:11:11', '22:22:22'], props:{ isRange: true, placeholder: "请选择活动时间" } }, ] }, { type: 'el-col', props: { span: 12 }, children: [ { type:'inputNumber', title: '排序', field: 'sort', value: 0, props:{ precision: 2 }, col:{ span: 12 }, validate: [{require: true, type: 'number', min: 10}] }, { type:'colorPicker', title: '颜色', field: 'color', value: '#ff7271', props:{ hue: true, format: 'hex' }, col:{ span: 12 } }, ] } ] } ]
form-create教程系列:
form-create教程:移除默认提交按钮
form-create教程:给内置组件和自定义组件添加事件