col 布局规则

TIP

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

naive-ui 栅格布局 Col props

自定义表单的布局

配置方式

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

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

配置参数

名称	类型	默认值	说明
span	number	24	栅格占位格数
offset	number	0	栅格左侧的间隔格数
push	number	0	栅格向右移动格数
pull	number	0	栅格向左移动格数

布局示例

基础布局

单列布局（默认）

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

使用 push 向右移动

const rule = {
    type: 'input',
    title: '商品名称',
    field: 'goods_name',
    col: {
        span: 8,
        push: 8,  // 向右移动8列
    }
}

使用 pull 向左移动

const rule = {
    type: 'input',
    title: '商品名称',
    field: 'goods_name',
    col: {
        span: 8,
        pull: 4,  // 向左移动4列
    }
}

使用 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 来原样生成组件
• Naive UI 使用 24 栅格系统
• 可以通过 row 的 props 设置相关属性