React:antd的table可伸缩列

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 ;
        }

        return (
             {
                            e.stopPropagation();
                        }}
                    />
                }
                onResize={onResize}
                draggableOpts={{enableUserSelectHack: false}}
            >
                
            
        );
    };

    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 (
            
(record.id)} pagination={false} bordered={true}/> ) } } export default LoginComponent;

参考文件:https://blog.csdn.net/bin_zi_123/article/details/103163225

你可能感兴趣的:(React:antd的table可伸缩列)