ant-design / ant-design/pro-components

🧐[问题]EditableProTable如何拿到setRowData后最新的数据?

Open
#9,054 6 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.