pro-components icon indicating copy to clipboard operation
pro-components copied to clipboard

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

Open gaox0326 opened this issue 11 months ago • 1 comments
trafficstars

提问前先看看:

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

💻 示例代码

🚑 其他信息

gaox0326 avatar Nov 27 '24 04:11 gaox0326