ant-design / ant-design/pro-components
🧐[问题]EditableProTable如何拿到setRowData后最新的数据?
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
提问前先看看:
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
### 🧐 问题描述
EditableProTable中,我需要实现两个列之间做联动,当第一列被选中后,默认填充第二列的值。使用setRowData后,前端页面效果可以实现了,但是打印当前dataSource却没有拿到第二列的值,我该怎么改善代码
### 💻 示例代码
代码我是直接拿demo改的
```tsx
import type {EditableFormInstance, ProColumns} from '@ant-design/pro-components';
import {
EditableProTable,
ProCard,
ProFormField,
} from '@ant-design/pro-components';
import {Button} from 'antd';
import React, {useRef, useState} from 'react';
type DataSourceType = {
id: React.Key;
title?: string;
decs?: string;
state?: string;
created_at?: number;
children?: DataSourceType[];
};
const defaultData: DataSourceType[] = new Array(1).fill(1).map((_, index) => {
return {
id: (Date.now() + index).toString(),
title: `活动名称${index}`,
decs: '这个活动真好玩',
state: 'open',
created_at: 1590486176000,
};
});
export default () => {
const [editableKeys, setEditableRowKeys] = useState(() =>
defaultData.map((item) => item.id),
);
const [dataSource, setDataSource] = useState(
() => defaultData,
);
const editorFormRef = useRef>();
const columns: ProColumns[] = [
{
title: '活动名称',
dataIndex: 'title',
width: '30%',
formItemProps: {
rules: [
{
required: true,
whitespace: true,
message: '此项是必填项',
},
{
message: '必须包含数字',
pattern: /[0-9]/,
},
{
max: 16,
whitespace: true,
message: '最长为 16 位',
},
{
min: 6,
whitespace: true,
message: '最小为 6 位',
},
],
},
},
{
title: '状态',
key: 'state',
dataIndex: 'state',
valueType: 'select',
valueEnum: {
all: {text: '全部', status: 'Default'},
open: {
text: '未解决',
status: 'Error',
},
closed: {
text: '已解决',
status: 'Success',
},
},
fieldProps: (form, config) => {
return {
onSelect: () => {
const newObj = {
desc: "这是描述"
}
console.log("on select")
editorFormRef.current?.setRowData(config?.rowIndex, newObj);
}
};
}
},
{
title: '描述',
dataIndex: 'desc',
},
{
title: '操作',
valueType: 'option',
width: 250,
render: () => {
return null;
},
},
];
return (
<>
editableFormRef={editorFormRef}
headerTitle="可编辑表格"
columns={columns}
rowKey="id"
scroll={{
x: 960,
}}
value={dataSource}
onChange={setDataSource}
recordCreatorProps={{
newRecordType: 'dataSource',
record: () => ({
id: Date.now(),
}),
}}
toolBarRender={() => {
return [
{
// dataSource 就是当前数据,可以调用 api 将其保存
console.log(dataSource);
}}
>
保存数据
,
];
}}
editable={{
type: 'multiple',
editableKeys,
actionRender: (row, config, defaultDoms) => {
return [defaultDoms.delete];
},
onValuesChange: (record, recordList) => {
console.log("recordList", recordList)
setDataSource(recordList);
},
onChange: setEditableRowKeys,
}}
/>
);
};
```
Contributor guide
Research direction
Start with the EditableProTable usage shown in the issue, especially setRowData, onValuesChange, and the save handler that logs dataSource. Trace how the row update flows into the controlled value and determine why the populated desc field is missing from the logged data. Done means the linked field appears in dataSource when the save action runs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100