tdesign-vue-next icon indicating copy to clipboard operation
tdesign-vue-next copied to clipboard

fix(table): 修正固定行和虚拟滚动的组合使用场景

Open Cat1007 opened this issue 10 months ago • 1 comments

🤔 这个 PR 的性质是?

  • [x] 日常 bug 修复

🔗 相关 Issue

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

💡 需求背景和解决方案

问题:

当虚拟滚动和固定行搭配使用时,固定的首尾行会因为被虚拟滚动裁剪而消失,且固定位置会因为虚拟滚动的 translateY 而产生错位

解决:

  1. 将虚拟滚动的裁剪逻辑交由 tbody 决定,以便 tbody 能获得正确的完整数据长度,从而进行固定行的拼接,并顺带修正以前因为错误数据长度导致的 fixed 行样式计算错误的问题。
  2. useFixed 中,计算 row 高度的相关逻辑,要注意虚拟滚动的时候,行的 index 并非对应 dom 元素的 index,需要倒推出 dom 的 index,以便取得正确的高度从而计算定位。
  3. 虚拟滚动下,固定行的定位需要计算容器偏移带来的错误,没有再解析字符串,直接使用 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 已提供或无须提供

Cat1007 avatar Apr 24 '24 03:04 Cat1007

完成

github-actions[bot] avatar Apr 24 '24 05:04 github-actions[bot]