col 布局规则

TIP

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

tdesign 栅格布局 Col props

自定义表单的布局

配置方式

在 FormCreate 中，可以通过 rule.col 配置项来设置组件的布局规则。TDesign 使用 12 栅格系统，默认 span: 12，即每个组件占一半宽度。

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

配置参数

Col Props

名称	类型	默认值	说明	必传
flex	String / Number	-	flex 布局填充。CSS 属性 flex 值。示例：2 / 3 / '100px' / 'auto' / '1 1 200px'	N
lg	Number / Object	-	≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象（小尺寸电脑）。TS 类型：number | BaseColProps	N
md	Number / Object	-	≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象（超小尺寸电脑）。TS 类型：number | BaseColProps	N
offset	Number	0	栅格左侧的间隔格数，间隔内不可以有栅格	N
order	Number	0	栅格顺序，flex 布局模式下有效	N
pull	Number	0	栅格向左移动格数	N
push	Number	0	栅格向左移动格数	N
sm	Number / Object	-	≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象（平板）。TS 类型：number | BaseColProps	N
span	Number	12	栅格占位格数，为 0 时相当于 display: none	N
tag	String	div	自定义元素标签	N
xl	Number / Object	-	≥1400px 响应式栅格，可为栅格数或一个包含其他属性的对象（中尺寸电脑）。TS 类型：number | BaseColProps	N
xs	Number / Object	-	<768px 响应式栅格，可为栅格数或一个包含其他属性的对象（手机）。TS 类型：number | BaseColProps。详细类型定义	N
xxl	Number / Object	-	≥1880px 响应式栅格，可为栅格数或一个包含其他属性的对象（大尺寸电脑）。TS 类型：number | BaseColProps	N

布局示例

基础布局

单列布局（默认）

const rule = {
    type: 'input',
    title: '商品名称',
    field: 'goods_name',
    // 不设置 col，默认 span: 12，占一半宽度
}

两列布局

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

三列布局

const rule = [
    {
        type: 'input',
        title: '商品名称',
        field: 'goods_name',
        col: {
            span: 4,  // 占据4列（1/3宽度）
        }
    },
    {
        type: 'input',
        title: '商品价格',
        field: 'price',
        col: {
            span: 4,  // 占据4列（1/3宽度）
        }
    },
    {
        type: 'input',
        title: '商品库存',
        field: 'stock',
        col: {
            span: 4,  // 占据4列（1/3宽度）
        }
    }
]

偏移布局

使用 offset 设置左侧偏移

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

响应式布局

基础响应式

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

Flex 布局

使用 flex 属性

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

使用 Row 和 Col 组件配合布局

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

Row Props

名称	类型	默认值	说明	必传
align	String	top	纵向对齐方式。可选项：top/middle/bottom	N
gutter	Number / Object / Array	0	栅格间隔，示例：{ xs: 8, sm: 16, md: 24}。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔]。TS 类型：number | GutterObject | Array<GutterObject | number>。详细类型定义	N
justify	String	start	flex 布局下的水平排列方式。可选项：start/end/center/space-around/space-between	N
tag	String	div	自定义元素标签	N

基础用法

const rule = [
    {
        type: 'row',
        native: true,
        children: [
            {
                type: 'col',
                props: {
                    span: 6,
                },
                native: true,
                children: [
                    {
                        type: 'input',
                        title: '商品名称',
                        field: 'goods_name',
                    }
                ]
            },
            {
                type: 'col',
                props: {
                    span: 6,
                },
                native: true,
                children: [
                    {
                        type: 'input',
                        title: '商品价格',
                        field: 'price',
                    }
                ]
            }
        ]
    }
]

多行布局

const rule = [
    {
        type: 'row',
        props: {
            gutter: 16,  // 设置栅格间隔
        },
        native: true,
        children: [
            {
                type: 'col',
                props: { span: 6 },
                native: true,
                children: [
                    {
                        type: 'input',
                        title: '商品名称',
                        field: 'goods_name',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 6 },
                native: true,
                children: [
                    {
                        type: 'select',
                        title: '商品分类',
                        field: 'category',
                    }
                ]
            }
        ]
    },
    {
        type: 'row',
        props: {
            gutter: 16,
        },
        native: true,
        children: [
            {
                type: 'col',
                props: { span: 4 },
                native: true,
                children: [
                    {
                        type: 'input-number',
                        title: '商品价格',
                        field: 'price',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 4 },
                native: true,
                children: [
                    {
                        type: 'input-number',
                        title: '商品库存',
                        field: 'stock',
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 4 },
                native: true,
                children: [
                    {
                        type: 'switch',
                        title: '是否上架',
                        field: 'is_show',
                    }
                ]
            }
        ]
    }
]

提示

• 使用 row 和 col 组件时，需要设置 native: true 来原样生成组件
• TDesign 使用 12 栅格系统（默认 span: 12）
• 支持 flex 属性进行 Flex 布局
• 可以通过 row 的 props 设置 gutter、justify、align 等属性