ant-design/ant-design

表格可伸缩列不跟手，位置会偏移，而且有时无法退出拖拽状态

Open

#56,356 建立於 2025年12月25日

在 GitHub 查看
 (14 留言) (3 反應) (0 負責人)TypeScript (98,031 star) (54,612 fork)batch import
Inactivehelp wanted📝 Documentation

描述

Reproduction link

https://ant-design.antgroup.com/components/table-cn#table-demo-resizable-column

Steps to reproduce

打开重现链接，进入官网的可伸缩列 demo 反复拖拽第一列的宽度

What is expected?

性能流畅，而且鼠标的位置与拖拽手柄的位置始终同步，并且鼠标放开一定会退出拖拽状态。 看看 AG Grid 是什么效果即可理解预期行为：https://www.ag-grid.com/example/

What is actually happening?

1.性能卡顿 2.鼠标的位置有时会与拖拽手柄失去同步 3.有时鼠标放开了之后仍然处于拖拽中的状态，此时需要点击一次鼠标来退出拖拽状态

Environment Info
antd 6.1.1
React 19
System Windows 11 25H2
Browser Microsoft Edge 143.0.3650.96 (正式版本) (64 位)

1.不接受 tableLayout=fixed 相关的临时方案，它带来的性能收益小于它带来的布局问题 2.我录制了视频来说明遇到的问题，将会追加附件

貢獻者指南

技術棧
reacttypescriptcss
領域
frontend
議題類型
bug
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
3
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
1-2 days
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
active
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
clear
前置要求
ReactTypeScriptantd Tablemouse events
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
60
研究方向
Investigate the drag handler in the Table component's resizable column implementation. Look at the event listeners for mousedown, mousemove, and mouseup. Check for issues with React state updates causing lag or missed events. Compare with AG Grid's approach for smooth resizing. Consider using requestAnimationFrame or passive events. Check the code in packages/table/src/ResizableColumn.tsx.