问题:react的antd Design组件库的表格不支持表格头拖拽 又增需求让拖拽
解决:react-draggable(4.4.5)我用的是这个版本 使用这个后 表格的宽度好像是必须给的
// 属性和组件库的表格一样 该怎么传就怎么传 但是表格列 宽度好像是必须给大小的
// 这是封装好的组件了 可以直接使用
import { Table } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { Resizable } from 'react-resizable';
import './index.css';
const ResizableTitle = (props) => {
const { onResize, width, ...restProps } = props;
if (!width) {
return <th {...restProps} />;
}
return (
<Resizable
width={width}
height={0}
onResize={onResize}
draggableOpts={{ enableUserSelectHack: false }}
>
<th {...restProps} />
</Resizable>
);
};
const ResizeTable = (props) => {
let { columns, dataSource, ...rest } = props;
const [cols, setCols] = useState(props.columns);
const colsRef = useRef([]);
const components = {
header: {
cell: ResizableTitle
}
};
useEffect(() => {
setCols(props.columns);
}, [props.columns]);
const handleResize =
(index) =>
(e, { size }) => {
console.log(size);
const nextColumns = [...cols];
nextColumns[index] = {
...nextColumns[index],
width: size.width
};
setCols(nextColumns);
};
colsRef.current = (cols || []).map((col, index) => ({
...col,
onHeaderCell: (column) => ({
width: column.width,
onResize: handleResize(index)
})
}));
return (
<div className="components-table-resizable-column">
<Table
components={components}
columns={colsRef.current}
dataSource={props.dataSource}
{...rest}
/>
</div>
);
};
export default ResizeTable;
// css文件
/* 内容过多以...显示 */
.ellipsisText {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 显示拖拽样式 */
.components-table-resizable-column .react-resizable {
position: relative;
max-width: 2000px;
background-clip: padding-box;
}
.components-table-resizable-column .react-resizable-handle {
position: absolute;
right: -9px;
bottom: 0;
z-index: 1;
width: 10px;
height: 100%;
border-left: rgb(230, 230, 250) 1px solid;
cursor: col-resize;
}
.ant-table-wrapper {
max-width: calc(100vw - 480px);
}