fix: 修复纵向滚动表格切换数据时表头宽度跳动 - #1504
Conversation
|
Caution The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased. |
|
@biubiukam is attempting to deploy a commit to the afc163's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughChanges滚动条列宽与空数据布局
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #1504 +/- ##
=======================================
Coverage 99.05% 99.06%
=======================================
Files 45 45
Lines 1372 1386 +14
Branches 411 425 +14
=======================================
+ Hits 1359 1373 +14
Misses 13 13 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
🤔 这个变动的性质是?
🔗 相关 Issue
💡 需求背景和解决方案
当 Table 配置
scroll.y后,表头和表体会被拆分成两个独立的 table。在空数据状态下,表头仍然包含业务列和 scrollbar 占位列,但原有逻辑会回退使用只包含业务列的 Body ColGroup,导致 N+1 个表头单元格对应 N 个
<col>。数据变为非空并完成列宽测量后,表头又会切换为包含 scrollbar 占位列的 N+1 列模型,浏览器因此重新分配业务列宽,产生宽度跳动。此外,空数据状态使用
overflow-y: auto,非空状态使用overflow-y: scroll。如果空数据测量时没有预留实际滚动条宽度,两种状态下可用于业务列的宽度也会不同。本次修改:
<col>和表头占位单元格。验证结果:
npm test:21 个测试文件、224 个测试全部通过。npm run tsc:通过。npm run lint:0 errors。npm run build:通过。[120, 424, 160],双向切换差值均为0px。<th>和 4 个<col>,最后一个<col>使用浏览器实际测得的 15px scrollbarSize。📝 更新日志
Summary by CodeRabbit