react+antd用react-resizable实现Table拖拽调整列宽

npm下载依赖包

npm install react-resizable --save

如果上述报错缺依赖包react-draggable还需要引入react-draggable包，并重启项目

使用

import React, {PureComponent} from 'react';

import { Resizable } from 'react-resizable';

const ResizeableTitle = (props) => {

const { onResize, width, ...restProps } = props;

if ( !width ) {

return

}

return (

)

}

class Table extends PureComponent {

constructor(props) {

super(props);

}

this.state = {

columns: this.props.columns // 从父组件拿到表头 或者 直接将表头写到此处

}

components = {

header: {

cell: ResizeableTitle,

},

};

handleResize = index => (e, { size }) => {

this.setState(({