ProTable/EditableProTable 无法用formRef.current.setFieldsValue修改table某一行的值

本文主要是介绍ProTable/EditableProTable 无法用formRef.current.setFieldsValue修改table某一行的值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.背景

ProTable的编辑表格(开启editable)，无法用formRef.current.setFieldsValue修改某一行的值，坑又来了…

2.解决

需要做个包装，Table外层增加ProForm和ProFormItem，ProTable增加属性name="xx"即可解决

<ProForm formRef={formRef} submitter={false}><ProFormItem><ProTablename="table"//属性名自己定义columns={columns}rowKey="id"editable={{form: form,type: 'multiple',...}}/></ProFormItem>
</ProForm>
// 这是某一行的保存按钮
<Button
onClick={() => {
console.log('表格数据',form.current?.getFieldsValue().table;);
}}
>保存</Button>

在这里插入图片描述
上图可以看到打印出来的key是下标，值为每一行的表格数据，所以可以通过下标(index)或者rowKey也就是绑定的id拿到每一条数据，然后在赋值整个table即可。

<Button
onClick={({index}) => {
let tableData = form.current?.getFieldsValue().table;
// 通过下标 如果按钮实在columns中定义，里面就能拿到index， 反正在哪基本都能获取下标let row = tableData[index];//当前行row.name='沐歌'//修改值tableData[index] = row//重新赋值formRef.current.setFieldsValue({//表格重新赋值table: Object.values(tableData),});
}}
>保存</Button>