Antd-ProComponents中的EditableProTable无法新增子行的问题

项目场景：

业务中需要做一个树形结构的参数可编辑表格，即可无限制增添子级，调研了一下EditableProTable，记录一下问题
官网地址：https://procomponents.ant.design/components/editable-table

效果还是很不错的，点击添加一行数据时直接添加子级有点不太符合业务，应该是在每一行的操作栏进行添加子级

---

问题描述

当在行内进行添加子级时，可以调用actionRef.current?.addEditRecord(row)来新建子行，但是实际使用中发现并不能创建

export type ActionTypeText<T> = {
    deleteText?: React.ReactNode;
    cancelText?: React.ReactNode;
    saveText?: React.ReactNode;
    editorType?: 'Array' | 'Map';
    addEditRecord?: (row: T, options?: AddLineOptions) => boolean;
};

问题就出在row，官方的API我认为列举的不完整。看了下源码，发现里面有个option，在这里面设置父级节点的key值才能正确添加子行

---

解决方案：

const columns = [
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: '15%',
      render: (text, record, _, action) => {
        const opt = [
          <a
            key="add"
            onClick={() => {
              actionRef.current?.addEditRecord(
                {
                  id: (Math.random() * 1000000).toFixed(0),
                  level: Number(record.level) + 1,
                  parentId: record.id,
                },
                {
                  position: 'bottom',
                  parentKey: record.id,
                  recordKey: 'id',
                },
              );
            }}
          >
            添加下级
          </a>
        ];
        return opt;
      },
    },
  ];
  

上面是你需要新增的rowData，后面是新增的option，parentKey一定要和当前节点保持一致

最终效果：

参数JSON的预览展示