用react-resizable插件来拖动改变ant-ui表格的列宽

项目需求：react项目中，做一个可以通过鼠标拖动改变列宽的表格

第一步：安装react-resizable插件

npm install  react-resizable --save

第二步：在项目中封装Resizable组件

Resizable.js

import * as React from "react";
import { Table } from "antd";
import "antd/dist/antd.css"; 
import { Resizable } from "react-resizable";
import "./resizeable-table.less";
 
class ResizeableTitle extends React.Component {
  render() {
    const { onResize, width, onClick, ...restProps } = this.props;
    if (!width) {
      return <th {...restProps} />;
    }
    return (
      <Resizable
        width={width}
        height={0}
        onResizeStart={() => (this.resizing = true)}
        onResizeStop={() => {
          setTimeout(() => {
            this.resizing = false;
          });
        }}
        onResize={onResize}
      >
        <th
          onClick={(...args) => {
            if (!this.resizing && onClick) {
              onClick(...args);
            }
          }}
          {...restProps}
        />
      </Resizable>
    );
  }
}
 
class ResizeableTable extends React.PureComponent {
  constructor(props) {
    super(props);
 
    this.state = {
      columns: props.columns
    };
  }
 
  components = {
    header: {
      cell: ResizeableTitle
    }
  };
 
  componentDidMount() {
    const handlers = document.querySelectorAll(
      ".react-resizable .react-resizable-handle"
    );
    handlers.forEach((handler) =>
      handler.addEventListener("click", (e) => {
        return false;
      })
    );
  }
 
  render() {
    const columns = this.state.columns.map((col, index) => ({
      ...col,
      onHeaderCell: (column) => ({
        width: column.width,
        onResize: this.handleResize(index)
      })
    }));
 
    const components = Object.assign(
      {},
      this.props.components,
      this.components
    );
 
    return <Table
       {...this.props}  
       pagination={false}
       columns={columns} 
       components={components} 
    />;
  }
 
  handleResize = (index) => (e, { size }) => {
    e.stopImmediatePropagation();
    this.setState(({ columns }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width
      };
      return { columns: nextColumns };
    });
  };
}
 
export default ResizeableTable;

resizeable-table.less

:global { 
    .react-resizable {
        position: relative;
      }
       
      .react-resizable-handle {
        position: absolute;
        width: 10px;
        height: 100%;
        bottom: 0;
        right: -5px;
        cursor: col-resize;
        z-index: 999;
      }
     
}

第三步：使用Resizable组件

import ResizeableTable from "@app/utils/reactResizable/Resizeable"

class AccelerateAll extends Component{
	...
	render(){
	  const columns = [...]
	  const tableData= [...]
	  return(
	     <div className="Accelerate-table"> 
              <ResizeableTable
                scroll={{  y:500 }} //固定表格高度，使用滚动条
                columns={columns} //表头数据
                dataSource={tableData} //内容数据
              />
          </div>
	  )
	}
}