react antd table拖拽

下载node包

npm install react-resizable -D
npm install @types/react-resizable --save-dev

定义一个公用组建 ResizableTable.tsx

import { useEffect, useState } from "react";
import { Resizable } from "react-resizable";
import "./resize.scss"
import { Table } from 'antd';
const ResizableTitle = (props: any) => {const { onResize, width, ...restProps } = propsif (!width) { return <th {...restProps} /> }return (<Resizablewidth={width}height={0}handle={<span className="react-resizable-handle" onClick={(e) => { e.stopPropagation() }} />}onResize={onResize}draggableOpts={{ enableUserSelectHack: false }}><th {...restProps} /></Resizable>)
}/*** ant-table 可伸缩列* @param props* @returns*/
const ResizableTable = (props: any) => {const [columns, setColumns] = useState([]);useEffect(() => {if (props.columns) {setColumns(props.columns)}}, [props.columns]);const handleResize = (index: number) => (_: any, { size }: any) => {const newColumns: any = [...columns];newColumns[index] = {...newColumns[index],width: size.width,};setColumns(newColumns);};const mergeColumns = columns.map((col: any, index) => ({...col,onHeaderCell: (column: any) => ({width: column.width,onResize: handleResize(index),}),}));return (<div className="resizeTable"><Table{...props}components={{header: {cell: ResizableTitle}}}scroll={{ x: 900 }}columns={mergeColumns}dataSource={props.dataSource}/></div>)
}export default ResizableTable

定义样式文件 resize.scss

.resizeTable { .react-resizable {position: relative;background-clip: padding-box;user-select: none;}// 防止默认出现横向滚动条.ant-table-content>table{min-width: calc(100% - 5px)!important;}.react-resizable-handle {position: absolute;width: 10px;height: 100%;bottom: 0;right: -5px;cursor: col-resize;background-image: none;z-index: 1;}
}

然后就可以愉快的使用了，使用实例(只需要换个名字就好了，其他和正常使用table没有区别，但是要有宽度哦，不然没办法拖拽)
 

<ResizableTable dataSource={dataSource} columns={columns} />;