本文将介绍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教程系列:
