分组表头时，如何使表具有可编辑的单元格？

Question

现在，我想用 antd 制作一张桌子。但是，在对表头进行分组时，col.children变为不可编辑。如何使其可编辑？

我的代码在下面，可编辑单元格与 antd 模式相同。我已经在 antd 模态中添加了一些代码，但这是没有用的。 col.children仍不可编辑。

const components = {
  body: {
    cell: EditableCell,
  },
};
const columns01 = [
  { id: 0, title: "enNm", dataIndex: "enNm", width: '25%'},
  { id: 1, title: "population", 
  children:
  [{id: 11,title:'urbPop',dataIndex:'urbPop', editable: true, 
width:'12.5%'},
  {id: 12,title:'rurPop',dataIndex:'rurPop', editable: true, width:'12.5%'}
  ], dataIndex: "popu", editable: true, width: '25%' },
  { id: 3, title: "indAvWu", dataIndex: "indAvWu", editable: 
true, width: '25%' },
  { id: 4, title: "bIrrA", dataIndex: "bIrrA", editable: 
true, width: '25%'}
];

const handleSave = (row, tableid) => {
      const newData = [...this.state[`dataSource${tableid}`]];
      const index = newData.findIndex(item => row.key === item.key);
      const item = newData[index];
      newData.splice(index, 1, {
        ...item,
        ...row,
      });
      var obj ={};
      obj[`dataSource${tableid}`] = newData;
      this.setState(obj);
    };

const createColEdit = (columns, tableid)=>{
      return columns.map((col) => {  
          if (!col.editable) {          
              return col;          
        }else if(!col.children)
          return {
          ...col,
          onCell: record => ({
            record,
            editable: col.editable,
            dataIndex: col.dataIndex,
            title: col.title,
            handleSave: handleSave,
            tableid: tableid,
          }),
        };
      return {
        ...col,
        ...col.children,
          onCell: record => ({
            record,
            editable: col.children.editable,
            dataIndex: col.children.dataIndex,
            title: col.children.title,
            handleSave: handleSave,
            tableid: tableid,
          }),
      }
      });
    };

<Table
        components={components}
        rowKey="id"
        columns={createColEdit(columns01, '01')}
        dataSource={dataSource01}
        rowClassName={() => 'editable-row'}
        bordered
        pagination={false}
      />