ant-design / ant-design/pro-components

🐛[BUG]BetaSchemaForm组件 使用查询表单 当第一列数据设置colSize=4时,设置的defaultColsNumber不生效,永远默认就只展示了一行数据

Open
#9,293 3 comments 0 reactions 0 assignees View on GitHub
⭕️ bug 🧱 antd
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

### 🐛 bug 描述

BetaSchemaForm组件 使用查询表单 当第一列数据设置colSize=4时(只要是大于内置的每行的列数都有问题),设置的defaultColsNumber不生效,永远默认就只展示了一行数据

### 📷 复现步骤

import type {
ProFormColumnsType,
ProFormLayoutType,
} from "@ant-design/pro-components";
import { BetaSchemaForm, ProFormSelect } from "@ant-design/pro-components";
import { Alert, DatePicker, Space } from "antd";
import dayjs from "dayjs";
import { useState } from "react";

const columns = new Array(10).fill(1).map((_, index) => {
return {
id: (Date.now() + index).toString(),
title: `活动名称${index}`,
colSize: index === 0 ? 1 : 1,
};
});
const columns1 = new Array(10).fill(1).map((_, index) => {
return {
id: (Date.now() + index).toString(),
title: `活动名称${index}`,
colSize: index === 0 ? 4 : 1,
};
});
const columns2 = new Array(10).fill(1).map((_, index) => {
return {
id: (Date.now() + index).toString(),
title: `活动名称${index}`,
colSize: index === 1 ? 4 : 1,
};
});
export default () => {
return (
<>
!!! 第一行colSize=1 defaultColsNumber=10

layoutType={"QueryFilter"}
defaultColsNumber={10}
columns={columns}
autoFocusFirstInput={false}
/>
!!! 第一行colSize=4 defaultColsNumber=10 显示错误 只能默认展开一行

layoutType={"QueryFilter"}
defaultColsNumber={10}
columns={columns1}
autoFocusFirstInput={false}
/>
!!! 第二行colSize=4 defaultColsNumber=10 能正确显示

layoutType={"QueryFilter"}
defaultColsNumber={10}
columns={columns2}
autoFocusFirstInput={false}
/>

);
};

设置的三种方式 colSize只要第一列数据大于了设置的每行的列数 就只能显示默认展示一行 第二列数据设置colSize就是正确的

### 🏞 期望结果

当设置第一行为colSize>1时,设置的defaultColsNumber依然生效
有需求就是查询表单第一项需要整行展示,这个bug就无法实现这个需求

### 💻 复现代码

[defaultColsNumber](https://codesandbox.io/p/sandbox/fu-ceng-chuang-kou-forked-cl7pyy?file=%2FApp.tsx%3A51%2C9-51%2C26)

### © 版本信息

- @ant-design/pro-components@2.7.16
- umi 版本
- 浏览器环境
- 开发环境 [e.g. mac OS]

### 🚑 其他信息

Image

Contributor guide

Open the contributing guide

Research direction

Start with the BetaSchemaForm QueryFilter reproduction and compare the three column configurations in the provided CodeSandbox, especially when the first item has colSize=4. Trace how defaultColsNumber is applied and verify that the expected number of columns remains visible when the first item spans more than one column.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.