👑 [需求] BetaSchemaForm group valueType 怎么实现两列结构

[boringplay]

🔩 所属模块或组件

BetaSchemaForm

🥰 需求描述

想要实现一个分组下有两个分组，这两个分组是两列结构

{
  title: 'group',
  valueType: 'group',
  columns: [
    {
      title: 'a-group',
      valueType: 'group',
      columns: [
        // ...
      ],
    },
    {
      title: 'b-group',
      valueType: 'group',
      columns: [
        // ...
      ],
    },
  ],
},

⛰ 功能需求适用场景

🧐 解决方案

🚑 其他信息

[echoyl]

使用grid模式 然后设置colProps的span，整行24

const columns = [
    {
      title: 'a-group',
      valueType: 'group',
      columns: [
        {
          title: 'left',
          dataIndex: 'left',
          colProps: { span: 12 },
        },
        {
          title: 'right',
          dataIndex: 'right',
          colProps: { span: 12 },
        },
      ],
    },
    {
      title: 'b-group',
      valueType: 'group',
      columns: [
        {
          title: 'left',
          dataIndex: 'left',
          colProps: { span: 12 },
        },
        {
          title: 'right',
          dataIndex: 'right',
          colProps: { span: 12 },
        },
      ],
    },
  ];
  return <BetaSchemaForm grid={true} columns={columns} />;

[boringplay]

这样的话，是先分行再分列是吧。a-group 左右各一半，b-group 左右各一半？还是 a-group 都在左边、b-group 都在右边？期望是后者。

[echoyl]

那就换一种排列就行了
效果图

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

export default () => {
  const columns = [
    {
      valueType: 'group',
      columns: [
        {
          title: 'a-group',
          valueType: 'group',
          colProps: { span: 12 },
          columns: [
            {
              title: 'a1',
              dataIndex: 'a1',
            },
            {
              title: 'a2',
              dataIndex: 'a2',
            },
          ],
        },
        {
          title: 'b-group',
          valueType: 'group',
          colProps: { span: 12 },
          columns: [
            {
              title: 'b1',
              dataIndex: 'b1',
            },
            {
              title: 'b2',
              dataIndex: 'b2',
            },
          ],
        },
      ],
    },
  ];
  return (
    <Card style={{ width: 600 }}>
      <BetaSchemaForm grid={true} columns={columns} />
    </Card>
  );
};