1、下载拖拽组件”react-resizable”

npm install react-resizable
2、将Table组件放入div中，并为div设置className："components-table-resizable-column"
3、在样式文件（.less）中设置以下样式，该样式会在鼠标移动至两列之间时，将出现可拖拽标识
//内容过多以...显示
.ellipsisText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
//显示拖拽样式
.components-table-resizable-column .react-resizable {
    position: relative ;
    background-clip: padding-box;
.components-table-resizable-column .react-resizable-handle {
    position: absolute;
    width: 10px;
    height: 100%;
    bottom: 0;
    right: -9px;
    cursor: col-resize;
    z-index: 1;
    border-left: white 1px solid;
4、创建tableResizable.js组件
import React from "react";
import {Resizable} from 'react-resizable';
class TableResizable extends React.Component {
    static ResizableTitle = props => {
        const {onResize, width, ...restProps} = props;
        if (!width) {
            return <th {...restProps} />;
        return (
            <Resizable
                width={width}
                height={0}
                handle={
                        className="react-resizable-handle"
                        onClick={e => {
                            e.stopPropagation();
                onResize={onResize}
                draggableOpts={{enableUserSelectHack: false}}
                <th {...restProps} />
            </Resizable>
    static components = {
        header: {
            cell: TableResizable.ResizableTitle,
export default TableResizable;
5、使用的页面：
import React from 'react';
import {inject, observer} from 'mobx-react';
import {runInAction} from "mobx";
import {withRouter} from 'react-router-dom'
import {Table} from 'antd';
import './login.less'
import TableResizable from '../../components/tableResizable'
@withRouter
@inject('loginStore')
@observer
class LoginComponent extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            dataSources: [
                {id: 10, name: '哈哈'},
                {id: 20, name: '哦哦'},
    componentWillReceiveProps(nextProps){
    componentDidUpdate(){
    handleResize = index => (e, { size }) => {
        // this.setState(({ columns }) => {
            const nextColumns = [...this.props.loginStore.columns];
            nextColumns[index] = {
                ...nextColumns[index],
                width: size.width,
            // return { columns: nextColumns };
        // });
        runInAction(()=>{
            this.props.loginStore.columns = nextColumns
    render() {
        const columns1 = this.props.loginStore.columns.map((col, index) => ({
            ...col,
            onHeaderCell: column => ({
              width: column.width,
              onResize: this.handleResize(index),
        return (
            <div className='components-table-resizable-column'>
                <Table size="small" scroll={{y: 'calc(50vh-160px)'}} columns={columns1}
                    dataSource={this.state.dataSources}
                    components={TableResizable.components}
                    rowKey={record => (record.id)}
                    pagination={false} bordered={true}/>