tdesign-react icon indicating copy to clipboard operation
tdesign-react copied to clipboard

feat(Table): enhance row drag functionality

Open RylanBot opened this issue 4 months ago • 2 comments

🤔 这个 PR 的性质是?

  • [x] 日常 bug 修复
  • [x] 新特性提交
  • [ ] 文档改进
  • [ ] 演示代码改进
  • [ ] 组件样式/交互改进
  • [ ] CI/CD 改进
  • [ ] 重构
  • [ ] 代码风格优化
  • [ ] 测试用例
  • [ ] 分支合并
  • [ ] 其他

🔗 相关 Issue

【1】

  • https://github.com/Tencent/tdesign-react/issues/3113
  • https://github.com/Tencent/tdesign-vue-next/issues/2899
    • 没有考虑 expandedRow 占据的位置,导致获取 index 后交换数组异常

【2】

  • https://github.com/Tencent/tdesign-vue-next/issues/4183

💡 需求背景和解决方案

拖拽时整体的渲染逻辑是,父行位置更新 -> data 刷新 -> 表格重绘 所以 expandedRow / tree 子节点在拖拽过程中只能停留原地 现在改为拖拽时隐藏原本的子节点,并生成一份它们的虚拟图像(DataTransfer.setDragImage()),使其与父行一起随鼠标移

image image

📝 更新日志

  • fix(Table): 修复开启 expandedRow 时 ,dragSort 失败的问题

  • feat(Table): 支持开启虚拟滚动时,同时使用 dragSort

  • feat(EnhancedTable): 优化拖拽时的预览效果,使展开子行与父行一起移动,同时禁止子行跨级拖拽

  • [ ] 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

  • [x] 文档已补充或无须补充
  • [x] 代码演示已提供或无须提供
  • [x] TypeScript 定义已补充或无须补充
  • [x] Changelog 已提供或无须提供

RylanBot avatar Sep 04 '25 18:09 RylanBot

tdesign-react-demo

npm i https://pkg.pr.new/tdesign-react@3794

commit: 5cfacbb

pkg-pr-new[bot] avatar Sep 04 '25 18:09 pkg-pr-new[bot]

完成

github-actions[bot] avatar Sep 04 '25 18:09 github-actions[bot]