react antd table拖拽

下载node包

TypeScript 复制代码
npm install react-resizable -D
npm install @types/react-resizable --save-dev

定义一个公用组建 ResizableTable.tsx

TypeScript 复制代码
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 } = props

    if (!width) { return <th {...restProps} /> }
    return (
        <Resizable
            width={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

html 复制代码
.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没有区别,但是要有宽度哦,不然没办法拖拽)

html 复制代码
<ResizableTable dataSource={dataSource} columns={columns} />;
相关推荐
无限大66 分钟前
《计算机“十万个为什么”》之跨域
javascript
晓13139 分钟前
前端篇——番外篇 Bootstrap框架
前端·javascript·css·html
黑心的奥利奥11 分钟前
前端项目利用Gitlab CI/CD流水线自动化打包、部署云服务
前端·ci/cd·gitlab
墨菲安全15 分钟前
NPM组件 @ivy-shared-components/iconslibrary 等窃取主机敏感信息
前端·npm·node.js·npm组件投毒·主机敏感信息窃取·恶意npm包
盛夏绽放1 小时前
Excel导出实战:从入门到精通 - 构建专业级数据报表的完整指南
开发语言·javascript·excel·有问必答
Mintopia1 小时前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia1 小时前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
liliangcsdn1 小时前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero1 小时前
基于vue3完成领域模型架构建设
前端
PanZonghui1 小时前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript