首页
/ 在 Ant Design Pro Components 中实现 BetaSchemaForm 分组两列布局

在 Ant Design Pro Components 中实现 BetaSchemaForm 分组两列布局

2025-06-13 20:11:49作者:凌朦慧Richard

背景介绍

Ant Design Pro Components 是一个基于 Ant Design 的企业级组件库,其中 BetaSchemaForm 组件提供了一种基于 JSON Schema 的声明式表单构建方式。在实际业务场景中,我们经常需要实现复杂的表单布局,比如将表单内容分成左右两列显示。

需求分析

在表单设计中,有时我们需要将一个分组下的内容分成左右两部分显示,每部分包含各自的字段集合。这种布局方式在需要对比显示或节省空间时非常有用。例如:

  • 左侧显示基本信息,右侧显示扩展信息
  • 左侧为必填项,右侧为选填项
  • 左侧为当前状态,右侧为修改选项

解决方案

基本实现方法

通过 BetaSchemaForm 的 valueType: 'group'colProps 属性,我们可以轻松实现两列布局:

const columns = [
  {
    valueType: 'group',
    columns: [
      {
        title: '左侧分组',
        valueType: 'group',
        colProps: { span: 12 },
        columns: [
          { title: '字段1', dataIndex: 'field1' },
          { title: '字段2', dataIndex: 'field2' }
        ]
      },
      {
        title: '右侧分组',
        valueType: 'group',
        colProps: { span: 12 },
        columns: [
          { title: '字段3', dataIndex: 'field3' },
          { title: '字段4', dataIndex: 'field4' }
        ]
      }
    ]
  }
];

关键属性说明

  1. valueType: 'group':声明这是一个分组容器
  2. colProps: { span: 12 }:设置分组占据的栅格列数,12 表示占据一半宽度
  3. columns:嵌套的子字段配置

完整示例

下面是一个完整的实现示例,包含了表单的渲染和布局控制:

import { BetaSchemaForm } from '@ant-design/pro-components';
import { Card } from 'antd';

const TwoColumnForm = () => {
  const columns = [
    {
      valueType: 'group',
      columns: [
        {
          title: '基本信息',
          valueType: 'group',
          colProps: { span: 12 },
          columns: [
            { title: '姓名', dataIndex: 'name' },
            { title: '年龄', dataIndex: 'age', valueType: 'digit' }
          ]
        },
        {
          title: '扩展信息',
          valueType: 'group',
          colProps: { span: 12 },
          columns: [
            { title: '邮箱', dataIndex: 'email', valueType: 'email' },
            { title: '手机号', dataIndex: 'phone', valueType: 'text' }
          ]
        }
      ]
    }
  ];

  return (
    <Card style={{ width: 800 }}>
      <BetaSchemaForm 
        grid={true} 
        columns={columns} 
        onFinish={async (values) => {
          console.log(values);
          return true;
        }}
      />
    </Card>
  );
};

布局原理

  1. 栅格系统:Ant Design 使用 24 栅格系统,span: 12 表示占据一半宽度
  2. 嵌套结构:外层 group 包含两个内层 group,每个内层 group 设置不同的 span
  3. grid 属性grid={true} 启用栅格布局模式,使 colProps 生效

高级用法

响应式布局

可以通过 colProps 设置不同屏幕尺寸下的布局:

colProps: { 
  xs: 24,  // 超小屏幕下占满
  sm: 12,  // 小屏幕下一半
  md: 12,  // 中等屏幕下一半
  lg: 8    // 大屏幕下三分之一
}

混合布局

可以在分组中混合使用不同比例的列:

columns: [
  {
    title: '主内容',
    valueType: 'group',
    colProps: { span: 16 },
    // ...
  },
  {
    title: '侧边栏',
    valueType: 'group',
    colProps: { span: 8 },
    // ...
  }
]

常见问题

  1. 布局错乱:确保外层容器宽度足够,避免挤压内部布局
  2. 字段对齐:同一分组内的字段高度最好保持一致
  3. 表单验证:分组布局不影响表单验证逻辑,验证规则按字段配置

总结

通过 BetaSchemaForm 的分组和栅格系统,我们可以灵活地实现各种复杂的表单布局。两列布局是其中常见的需求,掌握这种布局方式可以显著提升表单的可读性和用户体验。在实际项目中,可以根据业务需求调整列宽比例和响应式设置,打造最适合当前场景的表单界面。

登录后查看全文
热门项目推荐
相关项目推荐