踩坑记录

1.直接复制官网案例

# 为了很好的说明情况,将案例删减
export default () => {
  return (
    <>
      <EditableProTable
        loading={false}
        columns={columns}
        value={dataSource}
        onChange={setDataSource}
        editable={{
          type: 'multiple',
          editableKeys,
          onChange: setEditableRowKeys,
        }}
      />
    </>
  );
};

内部执行逻辑: 当你点击新建一行,value中没有这条数据.点击保存会执行editabl下的onSave,之后触发onChange事件刷新表格拿到最新数据.

2.需求来了: 新增一行直接保存到EditableProTable的value中

        toolBarRender={() => [
          <Button
            onClick={() => {
              // 默认的新增一行,没有点击保存时,数据还没有加到表格中.
              // actionRef.current?.addEditRecord?.({});
              
              // 使用setDataSource()来新建一行,你就可以拿到新建的默认数据.
              setDataSource([...dataSource,{id: '001',readonly: '1'}]);
            }}
          >
            新建一行
          </Button>,
        ]}

3.坑来了

需求: 点击一个设置按钮,让新建或者点了编辑的那一行数据变为新数据.

3.1 实现

拿到要设置的id,处理为新数组执行setDataSource.

奇怪的一幕发生了.....

点击保存,可以看到先是新数据,然后被旧数据覆盖.(很快的过渡)

3.2 分析原因

其实像编辑 新增 删除 这些操作都是执行EditableProTable内部默认的实现.(就是我不用手动去执行保存 修改 删除...)

通过setDataSource修改了最新的值,但内部默认的实现监听不到我设置的最新数据.

3.3 解决方法

通过测试可以用form进行解决.

3.4 实现结果

解决方案

  // 设置行值
  form.setFieldsValue({ [newArr[i].id]: newArr[i] });
  // 获取行值
  form.getFieldsValue()

遇到问题先查阅文档 还可以替换为 与 FormItem 配合