pro-components
pro-components copied to clipboard
🧐[问题] EditableProTable 和 Form 配合使用,设置 name 属性,多行编辑模式下新增子项的配置问题
提问前先看看:
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(<a
key='addChild'
onClick={() => {
const id = getRandomId()
config.addEditRecord?.({
...defaultData,
id: id
}, {
parentKey: row.id
})
}}
>
新增
</a>)
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