利用react-resizable实现antd表格头宽度可以拖拽调节-526互联

1.创建ResizeAbleTable文件夹

1.1 index.js

import {Table} from "antd4"
import React, {useEffect, useState} from "react"
import {Resizable} from "react-resizable"
import "./index.less"

/**
 * 可伸缩列
 * @param props
 * @returns
 */
const ResizableTable = (props) => {
    const [columns, setcolumn] = useState([])
    useEffect(() => {
        if (props.columns) {
            setcolumn(props.columns)
        }
    }, [props.columns])
    //给每一列加onResize 用于拖拽
    const setNewColumnCell = (columns, indexarray) => {
        columns.map((col, index) => {
            let array2 = JSON.parse(JSON.stringify(indexarray))
            array2.push(index)
            col.onHeaderCell = (columns) => ({
                width: columns.width ?? 0,
                onResize: handleResize(index, array2)
            })

            if (col.children?.length) {
                setNewColumnCell(col.children, array2)
            }
        })
    }
    const handleResize = (index, indexarray) => (e, a) => {
        const {size} = a
        let nextColumns =JSON.parse(JSON.stringify(columns))
        const width = size?.width ?? 80
        setNewColumnWidth(nextColumns, indexarray, width, [])
        setcolumn(nextColumns)
    }
    const setNewColumnWidth = (columns, indexarray, width, nowIndex) => {
        let i = 0
        for (let col of columns) {
            const index = i
            i++

            const currentLevel = indexarray?.[nowIndex.length]
            if (currentLevel == index) {
                console.log("当前层级", index, indexarray)
                let array2 = JSON.parse(JSON.stringify(nowIndex))
                array2.push(index)
                if (JSON.stringify(array2) == JSON.stringify(indexarray)) {
                    col.width = width
                    break
                }
                if (col.children?.length) {
                    setNewColumnWidth(col.children, indexarray, width, array2)
                }
            }
        }
      
    }

    const newcolumn = JSON.parse(JSON.stringify(columns)) 
    setNewColumnCell(newcolumn, [])
    console.log(newcolumn, "newcolumn")
    // setlastColumn(newcolumn)

    return (
        <Table
            bordered
            components={{
                header: {
                    cell: ResizableTitle
                }
            }}
            size="small"
            scroll={{x: "100vw"}}
            columns={newcolumn}
            dataSource={props.dataSource}
        />
    )
}

export default ResizableTable

const ResizableTitle = (props) => {
    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>
    )
}

1.2 index.less

:global {
  .react-resizable {
      position: relative;
      background-clip: padding-box;
  }

  .react-resizable-handle {
      position: absolute;
      width: 10px;
      height: 100%;
      bottom: 0;
      right: -5px;
      cursor: col-resize;
      background-image: none;
      z-index: 1;
  }
}

2.引入组件进行使用

<ResizableTable columns={ResettlementsColumn} dataSource={data} />

参考链接：

antd table 可伸缩列 react-resizable 多表头实现 - 简书 (jianshu.com)

react-resizable宽度resizable表格