tdesign-vue-next
tdesign-vue-next copied to clipboard
fix(table): 修正固定行和虚拟滚动的组合使用场景
🤔 这个 PR 的性质是?
- [x] 日常 bug 修复
🔗 相关 Issue
https://github.com/Tencent/tdesign-vue-next/issues/4141
💡 需求背景和解决方案
问题:
当虚拟滚动和固定行搭配使用时,固定的首尾行会因为被虚拟滚动裁剪而消失,且固定位置会因为虚拟滚动的 translateY 而产生错位
解决:
- 将虚拟滚动的裁剪逻辑交由 tbody 决定,以便 tbody 能获得正确的完整数据长度,从而进行固定行的拼接,并顺带修正以前因为错误数据长度导致的 fixed 行样式计算错误的问题。
- useFixed 中,计算 row 高度的相关逻辑,要注意虚拟滚动的时候,行的 index 并非对应 dom 元素的 index,需要倒推出 dom 的 index,以便取得正确的高度从而计算定位。
- 虚拟滚动下,固定行的定位需要计算容器偏移带来的错误,没有再解析字符串,直接使用 calc 进行了拼接
tbody 中使用错误数组长度的代码如下 https://github.com/Tencent/tdesign-vue-next/blob/0a221680ea238a0199ecb137503c45ba76504a79/src/table/tbody.tsx#L150 https://github.com/Tencent/tdesign-vue-next/blob/0a221680ea238a0199ecb137503c45ba76504a79/src/table/tbody.tsx#L172
📝 更新日志
- fix(Table): 正固定行和虚拟滚动的组合使用场景
☑️ 请求合并前的自查清单
⚠️ 请自检并全部勾选全部选项。⚠️
- [x] 文档已补充或无须补充
- [x] 代码演示已提供或无须提供
- [x] TypeScript 定义已补充或无须补充
- [x] Changelog 已提供或无须提供