Col Layout Rules

TIP

All components support layout configuration rules. For detailed information, see

Ant-design-vue Grid Layout Col props

Custom Form Layout

Configuration Method

In FormCreate, you can set component layout rules through the rule.col configuration item. If col is not set, the default layout is { span: 24 }, which means each component occupies the full row.

const rule = {
    type: 'input',
    field: 'username',
    title: 'Username',
    col: {
        span: 12,  // Takes up 12 columns (half width)
    }
}

Configuration Parameters

Member	Description	Type	Default
offset	Number of grid columns to offset on the left side, no grid can be placed in the offset area	number	0
order	Grid order, effective in flex layout mode	number	0
pull	Number of grid columns to move left	number	0
push	Number of grid columns to move right	number	0
span	Number of grid columns occupied, equivalent to display: none when 0	number	-
xs	<576px responsive grid, can be a number or an object containing other properties	number|object	-
sm	≥576px responsive grid, can be a number or an object containing other properties	number|object	-
md	≥768px responsive grid, can be a number or an object containing other properties	number|object	-
lg	≥992px responsive grid, can be a number or an object containing other properties	number|object	-
xl	≥1200px responsive grid, can be a number or an object containing other properties	number|object	-
xxl	≥1600px responsive grid, can be a number or an object containing other properties	number|object	-

Layout Examples

Basic Layout

Single Column Layout (Default)

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    // If col is not set, default span: 24, takes up full row
}

Two Column Layout

const rule = [
    {
        type: 'input',
        title: 'Product Name',
        field: 'goods_name',
        col: {
            span: 12,  // Takes up 12 columns (half width)
        }
    },
    {
        type: 'input',
        title: 'Product Price',
        field: 'price',
        col: {
            span: 12,  // Takes up 12 columns (half width)
        }
    }
]

Three Column Layout

const rule = [
    {
        type: 'input',
        title: 'Product Name',
        field: 'goods_name',
        col: {
            span: 8,  // Takes up 8 columns (1/3 width)
        }
    },
    {
        type: 'input',
        title: 'Product Price',
        field: 'price',
        col: {
            span: 8,  // Takes up 8 columns (1/3 width)
        }
    },
    {
        type: 'input',
        title: 'Product Stock',
        field: 'stock',
        col: {
            span: 8,  // Takes up 8 columns (1/3 width)
        }
    }
]

Offset Layout

Using offset to Set Left Offset

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    col: {
        span: 12,
        offset: 6,  // Left offset of 6 columns
    }
}

Responsive Layout

Basic Responsive

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    col: {
        xs: 24,  // <576px takes up full row
        sm: 12,  // ≥576px takes up half
        md: 8,   // ≥768px takes up 1/3
        lg: 6,   // ≥992px takes up 1/4
        xl: 4,   // ≥1200px takes up 1/6
        xxl: 3,  // ≥1600px takes up 1/8
    }
}

Using Row and Col Components for Layout

Besides using the rule.col configuration item, you can also use row and col components to manually control the layout.

Basic Usage

const rule = [
    {
        type: 'row',
        native: true,
        children: [
            {
                type: 'col',
                props: {
                    span: 12,
                },
                native: true,
                children: [
                    {
                        type: 'input',
                        title: 'Product Name',
                        field: 'goods_name',
                    }
                ]
            },
            {
                type: 'col',
                props: {
                    span: 12,
                },
                native: true,
                children: [
                    {
                        type: 'input',
                        title: 'Product Price',
                        field: 'price',
                    }
                ]
            }
        ]
    }
]

Multi-Row Layout

const rule = [
    {
        type: 'row',
        native: true,
        children: [
            {
                type: 'col',
                props: { span: 12 },
                native: true,
                children: [
                    {
                        type: 'input',
                        title: 'Product Name',
                        field: 'goods_name',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 12 },
                native: true,
                children: [
                    {
                        type: 'select',
                        title: 'Product Category',
                        field: 'category',
                    }
                ]
            }
        ]
    },
    {
        type: 'row',
        native: true,
        children: [
            {
                type: 'col',
                props: { span: 8 },
                native: true,
                children: [
                    {
                        type: 'input-number',
                        title: 'Product Price',
                        field: 'price',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 8 },
                native: true,
                children: [
                    {
                        type: 'input-number',
                        title: 'Product Stock',
                        field: 'stock',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 8 },
                native: true,
                children: [
                    {
                        type: 'switch',
                        title: 'On Sale',
                        field: 'is_show',
                    }
                ]
            }
        ]
    }
]

Tips

• When using row and col components, set native: true to generate components as-is
• Ant Design Vue uses a 24-column grid system
• You can set properties like gutter through row's props