🐛[BUG] ProTable的查询表单的span属性，当屏幕分辨率从宽度1297开始就使用xxl属性，而不是xl属性

[louis-web]

🐛 bug 描述

ProTable的查询表单的span属性，当屏幕分辨率从宽度1297开始就使用xxl属性，而不是xl属性。

📷 复现步骤

<ProTable<DataType, Params, ValueType>
        form={{
          ignoreRules: false,
          span: {
            xs: 24,
            sm: 24,
            md: 12,
            lg: 12,
            xl: 5,
            xxl: 3,
          }
        }}
...
/>

或者

<ProTable<DataType, Params, ValueType>
        search={{
          span: {
            xs: 24,
            sm: 24,
            md: 12,
            lg: 12,
            xl: 5,
            xxl: 3,
          }
        }}
...
/>

🏞 期望结果

希望能实现按span说明文档描述：

1.  xl 能应用于 屏幕 ≥ 1200px ，并且<1600px ;
   

2.  xxl 属性用于屏幕 ≥ 1600px ，而不是屏幕 ≥ 1297px。
   

© 版本信息

• ProComponents 版本: 2.3.57
• Antd 版本: 5.2.1
• @umijs/max 版本 4.0.51
• 浏览器环境 Google Chrome 110.0.5481.100

[chenshuai2144]

pro 的配置是这样的

 const CONFIG_SPAN_BREAKPOINTS = {
  xs: 513,
  sm: 513,
  md: 785,
  lg: 992,
  xl: 1057,
  xxl: Infinity,
};

和 antd中有点不同

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

感谢您提供的信息，根据您的描述，是使用 ProTable 时在 form 或 search 属性中设置的 span 参数在宽屏时使用的是 xxl 属性而非期望的 xl 属性。

经过了解，ProTable 是由 ant.design 的团队开发的一款再基于 Ant Design 之上的高级表格组件。在 Ant Design 的文档中提到 span 属性有多个可选值，根据官方文档的描述，xl 属性用于屏幕宽度 ≥ 1200px 且 <1600px，而 xxl 属性则用于屏幕宽度 ≥1600px，而不是 ≥1297px，因此按照 Ant Design 的文档，span 不会随着宽度到达 1297px 而应用 xxl 属性。

在 ProTable 中实现 span 属性时，并没有遵循 Ant Design 官方文档对 span 属性的规范，而是使用了自己的一套具有不同的断点宽度，这其中导致了与 Ant Design 中的 span 规范不同的结果。

如果您需要使用阿里的 Ant Design 中的 span 规范，可以直接在 ProTable 组件中设置form.layout为 'inline'，然后在 Form.Item 中使用 span 属性来控制表单项的宽度。以下是一个示例：

<ProTable
  form={{
    layout: 'inline',
  }}
>
  <Form.Item
    label="Test"
    name="test"
    span={5}
  >
    <Input />
  </Form.Item>
  <Form.Item
    label="Test2"
    name="test2"
    span={5}
  >
    <Input />
  </Form.Item>
  <Form.Item
    label="Test3"
    name="test3"
    span={5}
  >
    <Input />
  </Form.Item>
  <Form.Item
    label="Test4"
    name="test4"
    span={5}
  >
    <Input />
  </Form.Item>
</ProTable>

如果您需要保留 ProTable 中使用 span 参数的功能，可以参考 ProTable 的源代码，通过自定义断点宽度实现。代码如下所示：

const CONFIG_SPAN_BREAKPOINTS = {
  xs: 0,
  sm: 513,
  md: 785,
  lg: 992,
  xl: 1200,
  xxl: Infinity,
};

请根据您的实际需求进行选择。

[ycshill]

我也遇到了这个问题