# 自定义布局
通过设置配置项col可以实现组件的布局
iview Col | element-ui Col | ant-design-vue Col
# 使用内置col布局规则
当没有设置col时默认为{span:24}
<template>
<form-create :rule="rule" v-model="fApi" :option="options"/>
</template>
<script>
export default {
data(){
return {
fApi:{},
options:{
onSubmit:(formData)=>{
alert(JSON.stringify(formData))
}
},
rule:[
{
type:'input',
title:'col24',
field:'col24_1',
},
{
type:'input',
title:'col12',
field:'col12_1',
col:{
span:12
}
},
{
type:'input',
title:'col12',
field:'col12_2',
col:{
span:12
}
},
{
type:'input',
title:'col8',
field:'col8_1',
col:{
span:8
}
},
{
type:'input',
title:'col8',
field:'col8_2',
col:{
span:8
}
},
{
type:'input',
title:'col8',
field:'col8_3',
col:{
span:8
}
},
{
type:'input',
title:'col8|offset8',
field:'col8_8',
col:{
span:8,
offset:8
}
}
]
}
}
}
</script>
# 使用栅格布局组件
使用栅格组件手动控制组件的布局
<template>
<form-create :rule="rule" v-model="fApi" :option="options"/>
</template>
<script>
export default {
data() {
return {
fApi: {},
options: {
onSubmit: (formData) => {
alert(JSON.stringify(formData))
}
},
rule: [
{
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: 24
},
children: [
{
type: 'inputNumber',
title: '排序',
field: 'sort',
value: 0,
props: {
precision: 2
},
col: {
span: 12
},
validate: [{require: true, type: 'number', min: 10, message:'最小为10'}]
},
{
type: 'colorPicker',
title: '颜色',
field: 'color',
value: '#ff7271',
props: {
hue: true,
format: 'hex'
},
col: {
span: 12
}
},
]
}
]
}
]
}
}
}
</script>