fix(Table): rowspanAndColspan disappear during virtual scrolling#3900
fix(Table): rowspanAndColspan disappear during virtual scrolling#3900
rowspanAndColspan disappear during virtual scrolling#3900Conversation
commit: |
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a bug where cells with rowspan and colspan attributes disappear during virtual scrolling in the Table component. The fix ensures that the rowspan/colspan map is calculated based on the currently visible data rather than the full dataset, and uses useIsomorphicLayoutEffect instead of useEffect to synchronize layout calculations.
Key changes:
- Updated
useRowspanAndColspanhook to useuseIsomorphicLayoutEffectfor better synchronization with layout updates - Changed TBody to pass
renderDatainstead ofdatato ensure rowspan/colspan calculations work with virtualized data - Added debouncing mechanism in
useVirtualScrollto prevent rapid consecutive updates during scrolling
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/components/table/hooks/useRowspanAndColspan.ts | Switched from useEffect to useIsomorphicLayoutEffect for layout synchronization and added type import |
| packages/components/table/TBody.tsx | Changed to pass renderData instead of data to fix rowspan/colspan with virtual scrolling |
| packages/components/hooks/useVirtualScroll.ts | Added isUpdating flag and scroll position correction logic to prevent update conflicts |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| const targetScrollTop = scrollTop; | ||
| setTimeout(() => { | ||
| const currentScrollTop = container.current?.scrollTop; | ||
| const scrollTopDiff = Math.abs(currentScrollTop - targetScrollTop); | ||
| if (scrollTopDiff > 0) { | ||
| // eslint-disable-next-line no-param-reassign | ||
| container.current.scrollTop = targetScrollTop; |
There was a problem hiding this comment.
The variable targetScrollTop is assigned directly from scrollTop parameter without modification. This intermediate variable adds no value and can be removed - use scrollTop directly in the setTimeout callback.
| const targetScrollTop = scrollTop; | |
| setTimeout(() => { | |
| const currentScrollTop = container.current?.scrollTop; | |
| const scrollTopDiff = Math.abs(currentScrollTop - targetScrollTop); | |
| if (scrollTopDiff > 0) { | |
| // eslint-disable-next-line no-param-reassign | |
| container.current.scrollTop = targetScrollTop; | |
| setTimeout(() => { | |
| const currentScrollTop = container.current?.scrollTop; | |
| const scrollTopDiff = Math.abs(currentScrollTop - scrollTop); | |
| if (scrollTopDiff > 0) { | |
| // eslint-disable-next-line no-param-reassign | |
| container.current.scrollTop = scrollTop; |

🤔 这个 PR 的性质是?
🔗 相关 Issue
💡 需求背景和解决方案
📝 更新日志
fix(Table): 修复虚拟滚动时,开启合并行的单元格消失的问题
本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单