ant-design / ant-design/pro-components

🐛[BUG] 在ModalForm中使用 Editabletable 时, 如果把 Editabletable 放入 <ProForm.Group> 标签中, 在新增一行表格 record 时, 会让 table scorll 到最坐边

Open
#8,235 0 comments 0 reactions 0 assignees View on GitHub
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 描述

1. 在 ModalForm中使用 Editabletable, 用于弹窗编辑表格功能,
2. 表格列很多时, 增加 scorll 来滚动表格
3. 当列很多, 滚动到最右边处理
4. 点击表格底部'新增' 一行, 此时发现表格列滚动到最左边

### 📷 复现步骤

```
{/* 这里如果把 table 嵌入 ProForm.Group 会导致新增一行 Table record 时, 滚动条会到滚到最左边 */}



{/* 拿出来就好了 */}
{/* */}
```

### 🏞 期望结果

不滚动

### 💻 复现代码

https://codesandbox.io/p/sandbox/modal-biao-dan-forked-y4jsdd

```
import { EditableProTable, ProForm } from "@ant-design/pro-components";
import { nanoid } from "nanoid";

export default function ComputeTable() {
return (
{
return {
title: `规格${item}`,
width: 180,
key: `columns_${item}`,
valueType: "digit",
};
}),
]}
recordCreatorProps={{
newRecordType: "dataSource",
record: () => ({ id: nanoid() }),
position: "bottom",
creatorButtonText: "新增",
}}
editable={{
type: "multiple",
actionRender: (row, config, defaultDom) => {
return [defaultDom.delete];
},
}}
pagination={false}
/>
);
}

```

### © 版本信息

- ProComponents 版本: 2.6.50
- umi 版本
- 浏览器环境
- 开发环境 [e.g. mac OS]

### 🚑 其他信息
image

image

Contributor guide

Open the contributing guide

Research direction

Start with the CodeSandbox reproduction and the EditableProTable nested inside ProForm.Group, focusing on the recordCreatorProps flow that adds a row. Compare the behavior with the table rendered outside ProForm.Group. Done means adding a row no longer moves a horizontally scrolled table back to the left.

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
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.