col 布局规则

TIP

所有组件均支持布局配置规则,详细说明可参考

Ant-design-vue 栅格布局 Col props

自定义表单的布局

配置方式

在 FormCreate 中，可以通过 rule.col 配置项来设置组件的布局规则。如果未设置 col，默认布局为 { span: 24 }，即每个组件占满整行。

const rule = {
    type: 'input',
    field: 'username',
    title: '用户名',
    col: {
        span: 12,  // 占据12列（一半宽度）
    }
}

配置参数

成员	说明	类型	默认值
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	-

布局示例

基础布局

单列布局（默认）

const rule = {
    type: 'input',
    title: '商品名称',
    field: 'goods_name',
    // 不设置 col，默认 span: 24，占满整行
}

两列布局

const rule = [
    {
        type: 'input',
        title: '商品名称',
        field: 'goods_name',
        col: {
            span: 12,  // 占据12列（一半宽度）
        }
    },
    {
        type: 'input',
        title: '商品价格',
        field: 'price',
        col: {
            span: 12,  // 占据12列（一半宽度）
        }
    }
]

三列布局

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宽度）
        }
    }
]

偏移布局

使用 offset 设置左侧偏移

const rule = {
    type: 'input',
    title: '商品名称',
    field: 'goods_name',
    col: {
        span: 12,
        offset: 6,  // 左侧偏移6列
    }
}

响应式布局

基础响应式

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

使用 Row 和 Col 组件配合布局

除了使用 rule.col 配置项外，还可以使用 row 和 col 组件来手动控制布局。

基础用法

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: 'input',
                        title: '商品价格',
                        field: 'price',
                    }
                ]
            }
        ]
    }
]

多行布局

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 和 col 组件时，需要设置 native: true 来原样生成组件
• Ant Design Vue 使用 24 栅格系统
• 可以通过 row 的 props 设置 gutter 等属性