ant-design / ant-design/pro-components
🐛[BUG] FormList 嵌套 EditableTable 时无法获取 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
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