col 布局规则
配置方式
在 FormCreate 中，可以通过 rule.col 配置项来设置组件的布局规则。如果未设置 col，默认布局为 { span: 24 }，即每个组件占满整行。
js
const rule = {
type: 'input',
field: 'username',
title: '用户名',
col: {
span: 12, // 占据12列（一半宽度）
}
}配置参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| span | 栅格占据的列数 | number | — | 24 |
| offset | 栅格左侧的间隔格数 | number | — | 0 |
| push | 栅格向右移动格数 | number | — | 0 |
| pull | 栅格向左移动格数 | number | — | 0 |
| xs | <768px 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| sm | ≥768px 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| md | ≥992px 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| lg | ≥1200px 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| xl | ≥1920px 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| tag | 自定义元素标签 | string | * | div |
布局示例
基础布局
单列布局（默认）
js
const rule = {
type: 'input',
title: '商品名称',
field: 'goods_name',
// 不设置 col，默认 span: 24，占满整行
}两列布局
js
const rule = [
{
type: 'input',
title: '商品名称',
field: 'goods_name',
col: {
span: 12, // 占据12列（一半宽度）
}
},
{
type: 'input',
title: '商品价格',
field: 'price',
col: {
span: 12, // 占据12列（一半宽度）
}
}
]三列布局
js
const rule = [
{
type: 'input',
title: '商品名称',
field: 'goods_name',
col: {
span: 8, // 占据8列（1/3宽度）
}
},
{
type: 'input',
title: '商品价格',
field: 'price',
col: {
span: 8, // 占据8列（1/3宽度）
}
},
{
type: 'input',
title: '商品库存',
field: 'stock',
col: {
span: 8, // 占据8列（1/3宽度）
}
}
]四列布局
js
const rule = [
{
type: 'input',
title: '字段1',
field: 'field1',
col: {
span: 6, // 占据6列（1/4宽度）
}
},
{
type: 'input',
title: '字段2',
field: 'field2',
col: {
span: 6,
}
},
{
type: 'input',
title: '字段3',
field: 'field3',
col: {
span: 6,
}
},
{
type: 'input',
title: '字段4',
field: 'field4',
col: {
span: 6,
}
}
]偏移布局
使用 offset 设置左侧偏移
js
const rule = {
type: 'input',
title: '商品名称',
field: 'goods_name',
col: {
span: 12,
offset: 6, // 左侧偏移6列
}
}使用 push 向右移动
js
const rule = {
type: 'input',
title: '商品名称',
field: 'goods_name',
col: {
span: 8,
push: 8, // 向右移动8列
}
}使用 pull 向左移动
js
const rule = {
type: 'input',
title: '商品名称',
field: 'goods_name',
col: {
span: 8,
pull: 4, // 向左移动4列
}
}响应式布局
基础响应式
js
const rule = {
type: 'input',
title: '商品名称',
field: 'goods_name',
col: {
xs: 24, // <768px 时占满整行
sm: 12, // ≥768px 时占一半
md: 8, // ≥992px 时占1/3
lg: 6, // ≥1200px 时占1/4
xl: 4, // ≥1920px 时占1/6
}
}响应式对象配置
js
const rule = {
type: 'input',
title: '商品名称',
field: 'goods_name',
col: {
xs: { span: 24, offset: 0 }, // 移动端占满整行
sm: { span: 12, offset: 0 }, // 平板占一半
md: { span: 8, offset: 0 }, // 小屏电脑占1/3
lg: { span: 6, offset: 0 }, // 大屏电脑占1/4
}
}混合布局
不同宽度的组件组合
js
const rule = [
{
type: 'input',
title: '商品名称',
field: 'goods_name',
col: {
span: 16, // 占据16列（2/3宽度）
}
},
{
type: 'input',
title: '商品价格',
field: 'price',
col: {
span: 8, // 占据8列（1/3宽度）
}
},
{
type: 'input',
title: '商品描述',
field: 'description',
props: {
type: 'textarea',
},
col: {
span: 24, // 占满整行
}
}
]带偏移的布局
js
const rule = [
{
type: 'input',
title: '商品名称',
field: 'goods_name',
col: {
span: 8,
}
},
{
type: 'input',
title: '商品价格',
field: 'price',
col: {
span: 8,
offset: 8, // 左侧偏移8列
}
}
]实际应用场景
商品信息表单
js
const rule = [
{
type: 'input',
title: '商品名称',
field: 'goods_name',
col: {
span: 12,
}
},
{
type: 'select',
title: '商品分类',
field: 'category',
col: {
span: 12,
}
},
{
type: 'input-number',
title: '商品价格',
field: 'price',
col: {
span: 8,
}
},
{
type: 'input-number',
title: '商品库存',
field: 'stock',
col: {
span: 8,
}
},
{
type: 'switch',
title: '是否上架',
field: 'is_show',
col: {
span: 8,
}
},
{
type: 'input',
title: '商品描述',
field: 'description',
props: {
type: 'textarea',
},
col: {
span: 24, // 描述占满整行
}
}
]响应式表单布局
js
const rule = [
{
type: 'input',
title: '用户名',
field: 'username',
col: {
xs: 24, // 手机端：占满整行
sm: 12, // 平板：占一半
md: 12, // 小屏电脑：占一半
lg: 8, // 大屏电脑：占1/3
}
},
{
type: 'input',
title: '邮箱',
field: 'email',
col: {
xs: 24,
sm: 12,
md: 12,
lg: 8,
}
},
{
type: 'input',
title: '手机号',
field: 'phone',
col: {
xs: 24,
sm: 12,
md: 12,
lg: 8,
}
}
]使用 Row 和 Col 组件配合布局
除了使用 rule.col 配置项外，还可以使用 row 和 col 组件来手动控制布局，这种方式提供了更灵活的布局控制能力。
基础用法
使用 row 和 col 组件配合实现布局：
js
const rule = [
{
type: 'row',
native: true, // 原样生成组件，不使用 FormItem 包裹
children: [
{
type: 'col',
props: {
span: 12, // 占据12列
},
native: true,
children: [
{
type: 'input',
title: '商品名称',
field: 'goods_name',
}
]
},
{
type: 'col',
props: {
span: 12, // 占据12列
},
native: true,
children: [
{
type: 'input',
title: '商品价格',
field: 'price',
}
]
}
]
}
]多行布局
js
const rule = [
{
type: 'row',
native: true,
children: [
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'input',
title: '商品名称',
field: 'goods_name',
}
]
},
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'select',
title: '商品分类',
field: 'category',
}
]
}
]
},
{
type: 'row',
native: true,
children: [
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'input-number',
title: '商品价格',
field: 'price',
}
]
},
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'input-number',
title: '商品库存',
field: 'stock',
}
]
},
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'switch',
title: '是否上架',
field: 'is_show',
}
]
}
]
}
]带样式的 Row
js
const rule = [
{
type: 'row',
style: { width: '100%' }, // 设置行样式
native: true,
children: [
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'date-picker',
title: '活动日期',
field: 'section_day',
props: {
type: 'daterange',
}
}
]
},
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'input-number',
title: '排序',
field: 'sort',
}
]
}
]
}
]嵌套布局
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: '商品名称',
field: 'goods_name',
}
]
},
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'input',
title: '商品编码',
field: 'goods_code',
}
]
}
]
}
]
},
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'upload',
title: '商品图片',
field: 'image',
}
]
}
]
}
]Row 组件配置
Row 组件支持以下配置项：
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| gutter | 栅格间隔 | number | — | 0 |
| type | 布局模式 | string | flex | — |
| justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
| align | flex 布局下的垂直对齐方式 | string | top/middle/bottom | top |
| tag | 自定义元素标签 | string | * | div |
设置 Row 间隔
js
const rule = [
{
type: 'row',
props: {
gutter: 20, // 设置栅格间隔为20px
},
native: true,
children: [
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'input',
title: '商品名称',
field: 'goods_name',
}
]
},
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'input',
title: '商品价格',
field: 'price',
}
]
}
]
}
]使用 Flex 布局
js
const rule = [
{
type: 'row',
props: {
type: 'flex',
justify: 'space-between', // 两端对齐
align: 'middle', // 垂直居中
},
native: true,
children: [
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'input',
title: '商品名称',
field: 'goods_name',
}
]
},
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'input',
title: '商品价格',
field: 'price',
}
]
}
]
}
]实际应用场景
复杂表单布局
js
const rule = [
{
type: 'row',
props: { gutter: 20 },
native: true,
children: [
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'input',
title: '商品名称',
field: 'goods_name',
validate: [
{ required: true, message: '请输入商品名称' }
]
}
]
},
{
type: 'col',
props: { span: 12 },
native: true,
children: [
{
type: 'select',
title: '商品分类',
field: 'category',
options: [
{ value: '1', label: '电子产品' },
{ value: '2', label: '服装配饰' },
]
}
]
}
]
},
{
type: 'row',
props: { gutter: 20 },
native: true,
children: [
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'input-number',
title: '商品价格',
field: 'price',
}
]
},
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'input-number',
title: '商品库存',
field: 'stock',
}
]
},
{
type: 'col',
props: { span: 8 },
native: true,
children: [
{
type: 'switch',
title: '是否上架',
field: 'is_show',
}
]
}
]
},
{
type: 'row',
native: true,
children: [
{
type: 'col',
props: { span: 24 },
native: true,
children: [
{
type: 'input',
title: '商品描述',
field: 'description',
props: {
type: 'textarea',
rows: 4,
}
}
]
}
]
}
]两种布局方式对比
| 方式 | 优点 | 适用场景 |
|---|---|---|
rule.col | 配置简单，代码简洁 | 简单的单行布局 |
row + col 组件 | 更灵活，支持嵌套和复杂布局 | 需要精确控制布局、嵌套布局、复杂表单 |
提示
- 使用
row和col组件时，需要设置native: true来原样生成组件 row组件用于创建行容器，col组件用于创建列容器- 表单组件需要放在
col的children中 - 可以通过
row的props设置gutter、type、justify、align等属性