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>
    <ProTable
      name="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>

3.参考

点我打开地址