label 布局

TIP

可以通过wrap设置 label 的布局,和组件的布局样式

Ant-design-vue 栅格布局 Col props

配置方式

在 FormCreate 中，可以通过 rule.wrap 配置项来设置标签（label）和组件容器的布局规则。Ant Design Vue 使用 labelCol 和 wrapperCol 来配置标签和组件容器的栅格布局。

const rule = {
    type: 'input',
    field: 'username',
    title: '用户名',
    wrap: {
        labelCol: { span: 6 },      // 标签占据6列
        wrapperCol: { span: 18 }    // 组件容器占据18列
    }
}

配置参数

labelCol

标签容器的栅格配置，支持所有 Col 组件的属性。

成员	说明	类型	默认值
offset	栅格左侧的间隔格数，间隔内不可以有栅格	number	0
order	栅格顺序，flex 布局模式下有效	number	0
pull	栅格向左移动格数	number	0
push	栅格向右移动格数	number	0
span	栅格占位格数，为 0 时相当于 display: none	number	-
xs	<576px 响应式栅格，可为栅格数或一个包含其他属性的对象	number|object	-
sm	≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象	number|object	-
md	≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象	number|object	-
lg	≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象	number|object	-
xl	≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象	number|object	-
xxl	≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象	number|object	-

wrapperCol

组件容器的栅格配置，支持所有 Col 组件的属性。参数同 labelCol。

布局示例

基础布局

默认布局（不设置 wrap）

const rule = {
    type: 'input',
    title: '商品名称',
    field: 'goods_name',
    // 不设置 wrap，使用全局默认配置
}

等分布局（标签和组件各占一半）

const rule = {
    type: 'input',
    title: '商品名称',
    field: 'goods_name',
    wrap: {
        labelCol: { span: 12 },      // 标签占12列
        wrapperCol: { span: 12 }     // 组件占12列
    }
}

标签占1/4，组件占3/4

const rule = {
    type: 'input',
    title: '商品名称',
    field: 'goods_name',
    wrap: {
        labelCol: { span: 6 },       // 标签占6列（1/4）
        wrapperCol: { span: 18 }     // 组件占18列（3/4）
    }
}

标签占1/3，组件占2/3

const rule = {
    type: 'input',
    title: '商品名称',
    field: 'goods_name',
    wrap: {
        labelCol: { span: 8 },       // 标签占8列（1/3）
        wrapperCol: { span: 16 }     // 组件占16列（2/3）
    }
}

只设置 labelCol（wrapperCol 自动计算）

const rule = {
    type: 'input',
    title: '商品名称',
    field: 'goods_name',
    wrap: {
        labelCol: { span: 8 }        // 只设置标签，组件自动占据剩余空间
    }
}

响应式布局

响应式标签和组件布局

const rule = {
    type: 'input',
    title: '商品名称',
    field: 'goods_name',
    wrap: {
        labelCol: {
            xs: { span: 24 },   // <576px 时标签占满整行
            sm: { span: 12 },   // ≥576px 时标签占一半
            md: { span: 8 },    // ≥768px 时标签占1/3
            lg: { span: 6 },    // ≥992px 时标签占1/4
        },
        wrapperCol: {
            xs: { span: 24 },   // <576px 时组件占满整行
            sm: { span: 12 },   // ≥576px 时组件占一半
            md: { span: 16 },   // ≥768px 时组件占2/3
            lg: { span: 18 },   // ≥992px 时组件占3/4
        }
    }
}

简化的响应式配置

const rule = {
    type: 'input',
    title: '商品名称',
    field: 'goods_name',
    wrap: {
        labelCol: {
            xs: 24,   // <576px 时标签占满整行
            sm: 12,   // ≥576px 时标签占一半
            md: 8,    // ≥768px 时标签占1/3
            lg: 6,    // ≥992px 时标签占1/4
        }
    }
}

混合布局

不同字段使用不同的布局

const rule = [
    {
        type: 'input',
        title: '商品名称',
        field: 'goods_name',
        wrap: {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 }
        }
    },
    {
        type: 'input',
        title: '商品价格',
        field: 'price',
        wrap: {
            labelCol: { span: 8 },
            wrapperCol: { span: 16 }
        }
    },
    {
        type: 'input',
        title: '商品描述',
        field: 'description',
        props: {
            type: 'textarea',
        },
        wrap: {
            labelCol: { span: 4 },
            wrapperCol: { span: 20 }
        }
    }
]

实际应用场景

表单布局优化

const rule = [
    {
        type: 'input',
        title: '商品名称',
        field: 'goods_name',
        validate: [
            { required: true, message: '请输入商品名称' }
        ],
        wrap: {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 }
        }
    },
    {
        type: 'select',
        title: '商品分类',
        field: 'category',
        options: [
            { value: '1', label: '电子产品' },
            { value: '2', label: '服装配饰' },
        ],
        wrap: {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 }
        }
    },
    {
        type: 'input-number',
        title: '商品价格',
        field: 'price',
        wrap: {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 }
        }
    },
    {
        type: 'input',
        title: '商品描述',
        field: 'description',
        props: {
            type: 'textarea',
            rows: 4,
        },
        wrap: {
            labelCol: { span: 4 },
            wrapperCol: { span: 20 }  // 描述字段给组件更多空间
        }
    }
]

移动端适配

const rule = {
    type: 'input',
    title: '手机号码',
    field: 'phone',
    wrap: {
        labelCol: {
            xs: { span: 24 },  // 移动端标签占满整行
            sm: { span: 6 },    // 平板及以上标签占6列
        },
        wrapperCol: {
            xs: { span: 24 },   // 移动端组件占满整行
            sm: { span: 18 },   // 平板及以上组件占18列
        }
    }
}

配合 Col 布局使用

const rule = [
    {
        type: 'row',
        native: true,
        children: [
            {
                type: 'col',
                props: { span: 12 },
                native: true,
                children: [
                    {
                        type: 'date-picker',
                        title: '活动日期',
                        field: 'section_day',
                        props: {
                            picker: 'date',
                            range: true
                        },
                        wrap: {
                            labelCol: { span: 8 }  // 在 col 内部设置标签布局
                        }
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 12 },
                native: true,
                children: [
                    {
                        type: 'input-number',
                        title: '排序',
                        field: 'sort',
                        wrap: {
                            labelCol: { span: 8 }
                        }
                    }
                ]
            }
        ]
    }
]

使用 offset 偏移

const rule = {
    type: 'input',
    title: '商品名称',
    field: 'goods_name',
    wrap: {
        labelCol: { 
            span: 6,
            offset: 2  // 标签左侧偏移2列
        },
        wrapperCol: { span: 16 }
    }
}

注意事项

1. 属性名称：Ant Design Vue 使用 labelCol 和 wrapperCol，与其他框架（如 Arco Design 的 labelColProps 和 wrapperColProps）不同
2. 栅格系统：Ant Design Vue 使用 24 栅格系统，labelCol.span 和 wrapperCol.span 的总和通常为 24
3. 自动计算：如果只设置 labelCol，wrapperCol 会自动计算为 24 - labelCol.span
4. 响应式：可以通过响应式配置实现不同屏幕尺寸下的布局适配
5. 全局配置：可以在表单的全局配置中设置默认的 labelCol 和 wrapperCol

提示

• labelCol 和 wrapperCol 的 span 值之和通常为 24
• 可以只设置 labelCol，wrapperCol 会自动计算
• 响应式布局可以让表单在不同设备上都有良好的显示效果