col 布局规则

TIP

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

vant 栅格布局 Col props

自定义表单的布局

配置方式

在 FormCreate 中，可以通过 rule.col 配置项来设置组件的布局规则。Vant 使用 24 栅格系统，默认占满整行。

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

配置参数

参数	说明	类型	默认值
span	列元素宽度	number | string	-
offset	列元素偏移距离	number | string	-
tag	自定义元素标签	string	div

布局示例

基础布局

单列布局（默认）

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

两列布局

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列
    }
}

使用 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: 'stepper',
                        title: '商品价格',
                        field: 'price',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 8 },
                native: true,
                children: [
                    {
                        type: 'stepper',
                        title: '商品库存',
                        field: 'stock',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 8 },
                native: true,
                children: [
                    {
                        type: 'switch',
                        title: '是否上架',
                        field: 'is_show',
                    }
                ]
            }
        ]
    }
]

提示

• 使用 row 和 col 组件时，需要设置 native: true 来原样生成组件
• Vant 使用 24 栅格系统，适合移动端布局
• 移动端建议使用单列或两列布局，以获得更好的用户体验