ant-design / ant-design/pro-components

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

Open
#7,101 3 comments 0 reactions 0 assignees View on GitHub
🎖️ featrue AI Reply form table
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

### 🐛 bug 描述

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

### 📷 复现步骤

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

### 🏞 期望结果

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

### 💻 复现代码

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

或其核心代码:

```TypeScript
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[] = [
{
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 } }
) => (
>
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 () => (


onFinish={async (values) => {
console.log(values);
}}
columns={columns}
/>

);

```

### © 版本信息

- ProComponents 版本: 2.4.12

### 🚑 其他信息

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox and the core example using BetaSchemaForm, ProConfigProvider, and EditableProTable. Trace how the nested SubTable value is passed through FormList and how onChange is handled. Done means submitting the form includes the data entered in the nested EditableTable, or the supported alternative is documented.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.