col 布局规则
配置方式
在 FormCreate 中，可以通过 rule.col 配置项来设置组件的布局规则。如果未设置 col，默认布局为 { span: 24 }，即每个组件占满整行。
配置参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| 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 |
布局示例
基础布局
单列布局（默认）
两列布局
三列布局
四列布局
偏移布局
使用 offset 设置左侧偏移
使用 push 向右移动
使用 pull 向左移动
响应式布局
基础响应式
响应式对象配置
混合布局
不同宽度的组件组合
带偏移的布局
实际应用场景
商品信息表单
响应式表单布局
使用 Row 和 Col 组件配合布局
除了使用 rule.col 配置项外，还可以使用 row 和 col 组件来手动控制布局，这种方式提供了更灵活的布局控制能力。
基础用法
使用 row 和 col 组件配合实现布局：
多行布局
带样式的 Row
嵌套布局
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 间隔
使用 Flex 布局
实际应用场景
复杂表单布局
两种布局方式对比
| 方式 | 优点 | 适用场景 |
|---|---|---|
rule.col | 配置简单，代码简洁 | 简单的单行布局 |
row + col 组件 | 更灵活，支持嵌套和复杂布局 | 需要精确控制布局、嵌套布局、复杂表单 |
提示
- 使用
row和col组件时，需要设置native: true来原样生成组件 row组件用于创建行容器，col组件用于创建列容器- 表单组件需要放在
col的children中 - 可以通过
row的props设置gutter、type、justify、align等属性