antd的可伸缩列用hooks重构后难用的坑，CSS标准文档流与脱离文档流

import React, { useState } from ‘react’

import { Resizable } from ‘react-resizable’

import classnames from ‘classnames’

const ResizeableTitle = (props) => {

const { onResize, width, …restProps } = props

// 添加偏移量

const [offset, setOffset] = useState(0)

if (!width) {

return <th {…restProps} />

}

return (

<Resizable

// 宽度重新计算结果，表头应当加上偏移量，这样拖拽结束的时候能够计算结果；

// 当然在停止事件再计算应当一样，我没试过（笑）

width={width + offset}

height={0}

handle={

<span

// 有偏移量显示竖线

className={classnames([‘react-resizable-handle’, offset && ‘active’])}

// 拖拽层偏移

style={ { transform: translateX(${offset}px) }}

onClick={(e) => {

// 取消冒泡，不取消貌似容易触发排序事件

e.stopPropagation()

e.preventDefault()

}}

/>

}

// 拖拽事件实时更新

onResize={(e, { size }) => {

// 这里只更新偏移量，数据列表其实并没有伸缩

setOffset(size.width - width)

}}

// 拖拽结束更新

onResizeStop={(…argu) => {

// 拖拽结束以后偏移量归零

setOffset(0)

// 这里是props传进来的事件，在外部是列数据中的onHeaderCell方法提供的事件，请自行研究官方提供的案例

onResize(…argu)

}}

draggableOpts={ { enableUserSelectHack: false }}

)

}

export const tableComponent = {

header: {

cell: ResizeableTitle,

},

}

.react-resizable {

position: relative;

background-c