🐛[BUG] FormList 嵌套 EditableTable 时无法获取 Table 中的数据

[mxsl-gr]

🐛 bug 描述

当 FormList 中嵌套 EditableTable 时, EditableTable 的数据无法通过 form 正常获取

📷 复现步骤

在 FormList 中, 通过 ProConfigProvider 声明 EditableTable 渲染组件, 界面操作增加 EditableTable 的数据后, 点击提交.
控制台打印的数据, 会发现 EditableTable 中的数据无法获取, 但是其他字段数据正常.

🏞 期望结果

能正常获取 FormList 嵌套的 EditableTable 的数据, 或者有替代方案

💻 复现代码

可直接复现的 Case: https://codesandbox.io/s/formlist-sub-table-1i2jir

或其核心代码:

import type { ProFormColumnsType } from "@ant-design/pro-components";
import {
  BetaSchemaForm,
  ProConfigProvider,
  EditableProTable
} from "@ant-design/pro-components";
import React from "react";

export const EDIT_ID = "__edit_id";

const columns: ProFormColumnsType<any>[] = [
  {
    title: "列表",
    valueType: "formList",
    dataIndex: "list",
    columns: [
      {
        title: "子标题",
        dataIndex: "subTitle"
      },
      {
        title: "子表",
        valueType: "SubTable",
        dataIndex: "subTable",
        columns: [
          {
            title: "subName",
            dataIndex: "subName"
          }
        ]
      }
    ]
  }
];

const renderFormItem = (
  _data,
  { columns, fieldProps: { value, onChange } }
) => (
  <EditableProTable<Record<string, any>>
    columns={columns}
    rowKey={EDIT_ID}
    value={value}
    onChange={onChange}
    recordCreatorProps={{
      newRecordType: "dataSource",
      record: (index: number) => {
        return {
          [EDIT_ID]: index.toString()
        };
      }
    }}
    editable={{
      type: "multiple",
      editableKeys: value?.map((record, i) => {
        record[EDIT_ID] = i.toString();
        return record[EDIT_ID];
      }),
      onValuesChange: (record, recordList) => {
        console.log(record, recordList);
        onChange?.(recordList);
      }
    }}
  />
);

export default () => (
  <ProConfigProvider
    valueTypeMap={{
      SubTable: {
        renderFormItem
      }
    }}
  >
    <BetaSchemaForm<any>
      onFinish={async (values) => {
        console.log(values);
      }}
      columns={columns}
    />
  </ProConfigProvider>
);

© 版本信息

• ProComponents 版本: 2.4.12

🚑 其他信息

[mxsl-gr]

尝试追了一下, 应该是 FormList 里, EditableTable 内嵌 ProForm 的 Form Ref 的问题, 但是我不是专业的前端, 所以没追到具体的问题, @chenshuai2144 改天有时间的时候, 能帮忙提供一个可以绕过的替代方案也行...

[mxsl-gr]

昨天整体过了下代码, 知道问题了, 一个是这个场景没有给 EditableTable props.name, 所以 formRef 取值有问题
另外一个是, 即使加了 {name}, formList 下的 字段并不会自动带 index, 所以计算出来的 rowKey 其实是不对的, 而且嵌套结构 name 是自动嵌套的, 无需声明 parent name(dataIndex), 所以 editable table 内无法获取全路径的 data path.
我感受了一下, 这个应该不太好改, 如果要支持, 可能需要动到 name 父子关系的逻辑上, 所以本地临时魔改了代码, 让 formList 传递 index, 同时临时增加了 parentName 的方式先绕了一下.
因此, 这个 issue 的特性如果不准备提供, 可以 close... @chenshuai2144

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

Hi @chenshuai2144，感谢你提供的反馈和信息。

根据你的描述，问题可能出在两个地方。首先，当 FormList 中嵌套 EditableTable 时，EditableTable 组件没有传递 props.name 属性，导致表单引用（formRef）无法正确获取表单数据。其次，FormList 下的字段并不会自动带上索引（index），因此计算出的 rowKey 并不正确，同时嵌套结构的 name 也没有正确的嵌套父子关系。

尽管问题较为复杂且需要修改相关代码，我尝试进行了一些临时的修复。我在本地对代码进行了修改，让 FormList 传递了索引（index），并且临时增加了 parentName 的方式来解决问题。

然而，要完全支持这个问题可能需要对 name 的父子关系逻辑进行调整，因此我建议您考虑关闭这个 issue。如果您有其他问题需要帮助，请随时告诉我，我将尽力提供相关解决方案和支持。@chenshuai2144