ant-design / ant-design/pro-components

🧐[问题] EditableProTable 和 Form 配合使用,设置 name 属性,多行编辑模式下新增子项的配置问题

Open
#8,893 1 comment 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

### 🧐 问题描述

背景:EditableProTable 和 Form 配合使用,设置 name 属性,支持多行编辑,新增子项,相关配置问题咨询

**场景一**

首先新增一行,然后调用 addEditRecord 新增子项

```
editable={{
type: 'multiple',
actionRender: (row, config, defaultDom) => {
let actions = []
actions.push( {
const id = getRandomId()
config.addEditRecord?.({
...defaultData,
id: id
}, {
parentKey: row.id
})
}}
>
新增
)
return actions
}
}
```
通过查看源码发现,addEditRecord 调用流程
注意到 map_row_parentKey 直接赋值了 parentKey 也就是 row.id
`
map_row_parentKey: options?.parentKey
`
https://github.com/ant-design/pro-components/blob/43ceba3660ddc8465e5f519711583602b9a6ea7a/packages/utils/src/useEditableArray/index.tsx#L933-L952

然后在 dig 方法中处理 kvMap 时通过 getRowKey 获取 recordKey
https://github.com/ant-design/pro-components/blob/43ceba3660ddc8465e5f519711583602b9a6ea7a/packages/utils/src/useEditableArray/index.tsx#L178-L307

如果 rowKey 没有配置成 function 注意到如果有 name 直接返回了 index
https://github.com/ant-design/pro-components/blob/43ceba3660ddc8465e5f519711583602b9a6ea7a/packages/table/src/components/EditableTable/CellEditorTable.tsx#L18-L32

此时新加的子项 parentKey 是 row.id,而 kvMap 里父项 的 key 实际处理成了 index,匹配不上,此时新增子项就失败了

**场景二**

如果把 rowKey 自定义比如设置成 rowKey={(record) => record.id},getRowKey 就能返回正确的 key,此时新增子项成功,但是发现新增的子项数据不正确,实际效果是,子项的第一行数据变成了整个 list 的第一行数据,通过查看代码发现

如果设置 rowKey 为 function,keyName 会取到 rowKey 的返回值,但是实际上返回的已经是 rowKey 了,而不应是 keyName,后续的处理逻辑是基于 keyName 是字段名处理的,会导致 subName 取值错误

https://github.com/ant-design/pro-components/blob/43ceba3660ddc8465e5f519711583602b9a6ea7a/packages/table/src/utils/genProColumnToColumn.tsx#L144-L183

### 💻 示例代码

### 🚑 其他信息

Contributor guide

Open the contributing guide

Research direction

Reproduce both scenarios with EditableProTable and Form using name, multiple editing, addEditRecord, and parentKey. Read useEditableArray/index.tsx around the addEditRecord and dig logic, then inspect CellEditorTable.tsx and genProColumnToColumn.tsx. Done means child records are matched to their parent with the default rowKey and retain correct data when rowKey is a function.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.