how to use on multy children header
angleneo opened this issue · comments
`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} />
);
};
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
// }
},
{
title: '地址',
dataIndex: ['type', 'address'],
key: 'address',
// minWidth: 100
// width: 120,
// render: (a, b) => {
// return
// }
},
],
},
{
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 (如何在多级表头的情况下使用).