ant-design 虚拟表格拖动无法正常工作

qlzsbp2j 于 4个月前发布在其他

关注(0)|答案(9)|浏览(64)

Reproduction link

Steps to reproduce

打开官网的“table拖拽手柄示例”
表格加入virtual 和 scroll属性
表格拖动手柄丢失，调试发现 children属性无法生效

What is expected?

虚拟表格拖动可以正常工作

What is actually happening?

虚拟表格显示异常
| Environment | Info |
| ------------ | ------------ |
| antd | 5.16.0 |
| React | 18.2.0 |
| System | Windows 11 |
| Browser | Microsoft Edge 商业版版本 123.0.2420.65 (正式版本) (64 位) |

ant-design

来源：https://github.com/ant-design/ant-design/issues/48237

9条答案

按热度按时间

tpgth1q71#

Start a new pull request in StackBlitz Codeflow .

react-2ze7sa (Open reproduction)

赞(0）回复(0）举报 4个月前

nue99wik2#

虚拟列表是通过 components.body 实现的，占用了这个属性，不支持用户自己的 components.body 了，感觉客户端是不是可以再加个警告？

赞(0）回复(0）举报 4个月前

xv8emn3q3#

不对，好像已经支持了 components.body #47098

赞(0）回复(0）举报 4个月前

oalqel3c4#

不对，好像已经支持了 components.body #47098

我也是看到支持了才开始用的，但似乎还有问题

赞(0）回复(0）举报 4个月前

monwx1rj5#

https://stackblitz.com/edit/react-2ze7sa-woksuw?file=demo.tsx 先按这里的，官方的 demo 也会改成 Context 方式，现在 React 官方不推荐用 React.cloneElement 了。并且 virtual 下 Row 写法不同，要用 forwardRef 包一下，将 ref 和 setNodeRef 一起传递给 dom

赞(0）回复(0）举报 4个月前

lb3vh1jj6#

首先，非常感谢，新写法下拖动按钮可以正常显示了，但似乎由于虚拟滚动的原因，行往下拖动一行直到超出屏幕外（假设有20条，可视区域只能显示10条，现在要拖动第一条到第15条下面），竖向滚动条不会随着移动，这样就只能在显示出来的元素进行拖动排序，超出屏幕外就不行了

赞(0）回复(0）举报 4个月前

u0sqgete7#

首先，非常感谢，新写法下拖动按钮可以正常显示了，但似乎由于虚拟滚动的原因，行往下拖动一行直到超出屏幕外（假设有20条，可视区域只能显示10条，现在要拖动第一条到第15条下面），竖向滚动条不会随着移动，这样就只能在显示出来的元素进行拖动排序，超出屏幕外就不行了

这应该需要自己配合 Table ref scrollTo 来自己实现了，你自己先试试，后面有时间我也会尝试下

赞(0）回复(0）举报 4个月前

fslejnso8#

好的，再次感谢

赞(0）回复(0）举报 4个月前

cfh9epnr9#