col 布局规则

TIP

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

arco-design 栅格布局 Col props

自定义表单的布局

配置方式

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

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

配置参数

参数名	描述	类型	默认值	版本
span	栅格占位格数	number	24
offset	栅格左侧的间隔格数，间隔内不可以有栅格	number	-
order	对元素进行排序	number	-
xs	< 576px 响应式栅格	number | { [key: string]: any }	-
sm	>= 576px 响应式栅格	number | { [key: string]: any }	-
md	>= 768px 响应式栅格	number | { [key: string]: any }	-
lg	>= 992px 响应式栅格	number | { [key: string]: any }	-
xl	>= 1200px 响应式栅格	number | { [key: string]: any }	-
xxl	>= 1600px 响应式栅格	number | { [key: string]: any }	-
flex	设置 flex 布局属性	number | string | 'initial' | 'auto' | 'none'	-	2.10.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列
    }
}

响应式布局

基础响应式

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

Flex 布局

使用 flex 属性

const rule = {
    type: 'input',
    title: '商品名称',
    field: 'goods_name',
    col: {
        flex: 'auto',  // 自动填充剩余空间
    }
}

使用 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 来原样生成组件
• Arco Design 使用 24 栅格系统
• 支持 flex 属性进行 Flex 布局
• 可以通过 row 的 props 设置 gutter 等属性