Col Layout Rules
TIP
All components support layout configuration rules. For detailed information, see
Configuration Method
In FormCreate, you can set component layout rules using the rule.col configuration option. If col is not set, the default layout is { span: 24 }, meaning each component occupies the full row.
js
const rule = {
type: 'input',
field: 'username',
title: 'Username',
col: {
span: 12, // Occupies 12 columns (half the width)
}
}Configuration Parameters
| Parameter | Description | Type | Optional Values | Default Value |
|---|---|---|---|---|
| span | Number of columns occupied by the grid | number | — | 24 |
| offset | Number of spacing columns on the left | number | — | 0 |
| push | Number of columns to move right | number | — | 0 |
| pull | Number of columns to move left | number | — | 0 |
| xs | Responsive grid number or grid attribute object for <768px | number/object (e.g.: {span: 4, offset: 4}) | — | — |
| sm | Responsive grid number or grid attribute object for ≥768px | number/object (e.g.: {span: 4, offset: 4}) | — | — |
| md | Responsive grid number or grid attribute object for ≥992px | number/object (e.g.: {span: 4, offset: 4}) | — | — |
| lg | Responsive grid number or grid attribute object for ≥1200px | number/object (e.g.: {span: 4, offset: 4}) | — | — |
| xl | Responsive grid number or grid attribute object for ≥1920px | number/object (e.g.: {span: 4, offset: 4}) | — | — |
| tag | Custom element tag | string | * | div |
Layout Examples
Basic Layout
Single Column Layout (Default)
js
const rule = {
type: 'input',
title: 'Product Name',
field: 'goods_name',
// If col is not set, defaults to span: 24, occupying the full row
}Two Column Layout
js
const rule = [
{
type: 'input',
title: 'Product Name',
field: 'goods_name',
col: {
span: 12, // Occupies 12 columns (half the width)
}
},
{
type: 'input',
title: 'Product Price',
field: 'price',
col: {
span: 12, // Occupies 12 columns (half the width)
}
}
]Three Column Layout
js
const rule = [
{
type: 'input',
title: 'Product Name',
field: 'goods_name',
col: {
span: 8, // Occupies 8 columns (1/3 width)
}
},
{
type: 'input',
title: 'Product Price',
field: 'price',
col: {
span: 8, // Occupies 8 columns (1/3 width)
}
},
{
type: 'input',
title: 'Product Stock',
field: 'stock',
col: {
span: 8, // Occupies 8 columns (1/3 width)
}
}
]Four Column Layout
js
const rule = [
{
type: 'input',
title: 'Field 1',
field: 'field1',
col: {
span: 6, // Occupies 6 columns (1/4 width)
}
},
{
type: 'input',
title: 'Field 2',
field: 'field2',
col: {
span: 6,
}
},
{
type: 'input',
title: 'Field 3',
field: 'field3',
col: {
span: 6,
}
},
{
type: 'input',
title: 'Field 4',
field: 'field4',
col: {
span: 6,
}
}
]Offset Layout
Using offset to Set Left Offset
js
const rule = {
type: 'input',
title: 'Product Name',
field: 'goods_name',
col: {
span: 12,
offset: 6, // Left offset 6 columns
}
}Using push to Move Right
js
const rule = {
type: 'input',
title: 'Product Name',
field: 'goods_name',
col: {
span: 8,
push: 8, // Move right 8 columns
}
}Using pull to Move Left
js
const rule = {
type: 'input',
title: 'Product Name',
field: 'goods_name',
col: {
span: 8,
pull: 4, // Move left 4 columns
}
}Responsive Layout
Basic Responsive
js
const rule = {
type: 'input',
title: 'Product Name',
field: 'goods_name',
col: {
xs: 24, // <768px: occupies full row
sm: 12, // ≥768px: occupies half
md: 8, // ≥992px: occupies 1/3
lg: 6, // ≥1200px: occupies 1/4
xl: 4, // ≥1920px: occupies 1/6
}
}Responsive Object Configuration
js
const rule = {
type: 'input',
title: 'Product Name',
field: 'goods_name',
col: {
xs: { span: 24, offset: 0 }, // Mobile: occupies full row
sm: { span: 12, offset: 0 }, // Tablet: occupies half
md: { span: 8, offset: 0 }, // Small screen: occupies 1/3
lg: { span: 6, offset: 0 }, // Large screen: occupies 1/4
}
}Mixed Layout
Components with Different Widths
js
const rule = [
{
type: 'input',
title: 'Product Name',
field: 'goods_name',
col: {
span: 16, // Occupies 16 columns (2/3 width)
}
},
{
type: 'input',
title: 'Product Price',
field: 'price',
col: {
span: 8, // Occupies 8 columns (1/3 width)
}
},
{
type: 'input',
title: 'Product Description',
field: 'description',
props: {
type: 'textarea',
},
col: {
span: 24, // Occupies full row
}
}
]Layout with Offset
js
const rule = [
{
type: 'input',
title: 'Product Name',
field: 'goods_name',
col: {
span: 8,
}
},
{
type: 'input',
title: 'Product Price',
field: 'price',
col: {
span: 8,
offset: 8, // Left offset 8 columns
}
}
]Practical Application Scenarios
Product Information Form
js
const rule = [
{
type: 'input',
title: 'Product Name',
field: 'goods_name',
col: {
span: 12,
}
},
{
type: 'select',
title: 'Product Category',
field: 'category',
col: {
span: 12,
}
},
{
type: 'input-number',
title: 'Product Price',
field: 'price',
col: {
span: 8,
}
},
{
type: 'input-number',
title: 'Product Stock',
field: 'stock',
col: {
span: 8,
}
},
{
type: 'switch',
title: 'On Sale',
field: 'is_show',
col: {
span: 8,
}
},
{
type: 'input',
title: 'Product Description',
field: 'description',
props: {
type: 'textarea',
},
col: {
span: 24, // Description occupies full row
}
}
]Responsive Form Layout
js
const rule = [
{
type: 'input',
title: 'Username',
field: 'username',
col: {
xs: 24, // Mobile: occupies full row
sm: 12, // Tablet: occupies half
md: 12, // Small screen: occupies half
lg: 8, // Large screen: occupies 1/3
}
},
{
type: 'input',
title: 'Email',
field: 'email',
col: {
xs: 24,
sm: 12,
md: 12,
lg: 8,
}
},
{
type: 'input',
title: 'Phone',
field: 'phone',
col: {
xs: 24,
sm: 12,
md: 12,
lg: 8,
}
}
]Using Row and Col Components for Layout
In addition to using the rule.col configuration item, you can also use row and col components to manually control the layout, which provides more flexible layout control capabilities.
Basic Usage
Using row and col components together to implement layout:
js
const rule = [
{
type: 'row',
native: true, // Generate component as-is, without FormItem wrapper
children: [
{
type: 'col',
props: {
span: 12, // Occupies 12 columns
},
native: true,
children: [
{
type: 'input',
title: 'Product Name',
field: 'goods_name',
}
]
},
{
type: 'col',
props: {
span: 12, // Occupies 12 columns
},
native: true,
children: [
{
type: 'input',
title: 'Product Price',
field: 'price',
}
]
}
]
}
]Multi-Row Layout
js
const rule = [
{
type: 'row',
native: true,
children: [
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'input',
title: 'Product Name',
field: 'goods_name',
}
]
},
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'select',
title: 'Product Category',
field: 'category',
}
]
}
]
},
{
type: 'row',
native: true,
children: [
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'input-number',
title: 'Product Price',
field: 'price',
}
]
},
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'input-number',
title: 'Product Stock',
field: 'stock',
}
]
},
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'switch',
title: 'On Sale',
field: 'is_show',
}
]
}
]
}
]Row with Styles
js
const rule = [
{
type: 'row',
style: { width: '100%' }, // Set row style
native: true,
children: [
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'date-picker',
title: 'Activity Date',
field: 'section_day',
props: {
type: 'daterange',
}
}
]
},
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'input-number',
title: 'Sort',
field: 'sort',
}
]
}
]
}
]Nested Layout
js
const rule = [
{
type: 'row',
native: true,
children: [
{
type: 'col',
props: { span: 16 },
native: true,
children: [
{
type: 'row',
native: true,
children: [
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'input',
title: 'Product Name',
field: 'goods_name',
}
]
},
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'input',
title: 'Product Code',
field: 'goods_code',
}
]
}
]
}
]
},
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'upload',
title: 'Product Image',
field: 'image',
}
]
}
]
}
]Row Component Configuration
Row component supports the following configuration items:
| Parameter | Description | Type | Optional Values | Default Value |
|---|---|---|---|---|
| gutter | Grid spacing | number | — | 0 |
| type | Layout mode | string | flex | — |
| justify | Horizontal alignment in flex layout | string | start/end/center/space-around/space-between | start |
| align | Vertical alignment in flex layout | string | top/middle/bottom | top |
| tag | Custom element tag | string | * | div |
Setting Row Spacing
js
const rule = [
{
type: 'row',
props: {
gutter: 20, // Set grid spacing to 20px
},
native: true,
children: [
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'input',
title: 'Product Name',
field: 'goods_name',
}
]
},
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'input',
title: 'Product Price',
field: 'price',
}
]
}
]
}
]Using Flex Layout
js
const rule = [
{
type: 'row',
props: {
type: 'flex',
justify: 'space-between', // Space between
align: 'middle', // Vertical center
},
native: true,
children: [
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'input',
title: 'Product Name',
field: 'goods_name',
}
]
},
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'input',
title: 'Product Price',
field: 'price',
}
]
}
]
}
]Practical Application Scenarios
Complex Form Layout
js
const rule = [
{
type: 'row',
props: { gutter: 20 },
native: true,
children: [
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'input',
title: 'Product Name',
field: 'goods_name',
validate: [
{ required: true, message: 'Enter product name' }
]
}
]
},
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'select',
title: 'Product Category',
field: 'category',
options: [
{ value: '1', label: 'Electronics' },
{ value: '2', label: 'Clothing & Accessories' },
]
}
]
}
]
},
{
type: 'row',
props: { gutter: 20 },
native: true,
children: [
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'input-number',
title: 'Product Price',
field: 'price',
}
]
},
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'input-number',
title: 'Product Stock',
field: 'stock',
}
]
},
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'switch',
title: 'On Sale',
field: 'is_show',
}
]
}
]
},
{
type: 'row',
native: true,
children: [
{
type: 'col',
props: { span: 24 },
native: true,
children: [
{
type: 'input',
title: 'Product Description',
field: 'description',
props: {
type: 'textarea',
rows: 4,
}
}
]
}
]
}
]Comparison of Two Layout Methods
| Method | Advantages | Applicable Scenarios |
|---|---|---|
rule.col | Simple configuration, concise code | Simple single-row layout |
row + col components | More flexible, supports nesting and complex layouts | Precise layout control, nested layouts, complex forms |
Tips
- When using
rowandcolcomponents, you need to setnative: trueto generate components as-is rowcomponent is used to create row containers,colcomponent is used to create column containers- Form components need to be placed in the
childrenofcol - You can set properties like
gutter,type,justify,alignthroughrow'sprops