how to use on multy children header

[angleneo]

`import React, { useState } from 'react'; import './index.less'; import { ProTable } from '@ant-design/pro-components'; import { Resizable } from 'react-resizable'; const ResizableTitle = (props) => { const { onResize, width, ...restProps } = props; if (!width) { return <th {...restProps} />; } return ( <Resizable width={width} height={0} handle={ <span className="react-resizable-handle" onClick={(e) => { e.stopPropagation(); }} /> } onResize={onResize} draggableOpts={{ enableUserSelectHack: false, }} > <th {...restProps} /> </Resizable> ); }; const App = () => { const [columns, setColumns] = useState([ { title: 'Date', dataIndex: 'date', width: 200, }, { title: 'Amount', dataIndex: 'amount', width: 100, sorter: (a, b) => a.amount - b.amount, }, { title: '信息', // width: 300, children: [ { title: '年龄1', dataIndex: ['type', 'age'], key: 'age', // minWidth: 100 width: 120, // render: (a, b) => { // return

{b?.age}

// } }, { title: '地址', dataIndex: ['type', 'address'], key: 'address', // minWidth: 100 // width: 120, // render: (a, b) => { // return

{b?.address}

// } }, ], }, { title: 'Note', dataIndex: 'note', // width: 100, }, { title: 'Action', key: 'action', render: () => Delete, }, ]); const data = [ { key: 0, date: '2018-02-11', amount: 120, type: { key: '111', age: 10, address: 'addd' }, note: 'transfer', }, { key: 1, date: '2018-03-11', amount: 243, type: { key: '222', age: 10, address: 'cccc' }, note: 'transfer', }, { key: 2, date: '2018-04-11', amount: 98, type: { key: 'dddd', age: 10, address: 'addd' }, note: 'transfer', }, ]; // const handleResize = // (index) => // (_, { size }) => { // console.log('index', index, _, size) // const newColumns = [...columns]; // newColumns[index] = { // ...newColumns[index], // width: size.width, // }; // setColumns(newColumns); // }; const handleResize = (index, int) => (e, { size }) => { console.log('index', index, int) // setColumns(prevColumns => { // const newColumns = [...prevColumns];

//   // 如果有父索引，处理子列
//   if (parentIndex !== null) {
//     console.log('ddd', index, parentIndex)
//     // const newChildren = [...newColumns[parentIndex].children];
//     // newChildren[index] = { ...newChildren[index], width: size.width };
//     // newColumns[parentIndex] = { ...newColumns[parentIndex], children: newChildren };
//     newColumns[index] = { ...newColumns[index], width: size.width };
//   } else {
//     // 处理非子列
//     newColumns[index] = { ...newColumns[index], width: size.width };
//   }

//   return newColumns;
// });
// const newColumns = [...columns];
// newColumns[index] = {
//   ...newColumns[index],
//   width: size.width,
// };
// setColumns(newColumns);

};

const mapColumns = (columns) => { return columns.map((col, index) => { console.log('col', col) const newCol = { ...col, onHeaderCell: (column) => { // console.log('cccc', column) return { width: column.width, onResize: handleResize(index), } }, };

  // 如果列有子列，递归处理
  if (col.children && col.children.length > 0) {
    newCol.children = mapColumns(col.children);
    newCol.children.map((val, int) => val.index = int)
  }

  return newCol;
});

};

const mappedColumns = mapColumns(columns); return ( <ProTable bordered components={{ header: { cell: ResizableTitle, }, }} columns={mappedColumns} dataSource={data} /> ); }; export default App;`

how to use on multy children table （如何在多级表头的情况下使用）.