Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Table): correct the behavior of the combined usage of fixed rows and virtual scroll #4145

Merged
merged 5 commits into from
May 22, 2024

Conversation

Cat1007
Copy link
Contributor

@Cat1007 Cat1007 commented Apr 24, 2024

🤔 这个 PR 的性质是?

  • 日常 bug 修复

🔗 相关 Issue

#4141

💡 需求背景和解决方案

问题:

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

解决:

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

tbody 中使用错误数组长度的代码如下

const dataLength = this.data.length;

📝 更新日志

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

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

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

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

Copy link
Contributor

github-actions bot commented Apr 24, 2024

完成

src/table/tbody.tsx Outdated Show resolved Hide resolved
src/table/tr.tsx Outdated Show resolved Hide resolved
@uyarn uyarn changed the title fix(table): 修正固定行和虚拟滚动的组合使用场景 fix(Table): correct the behavior of the combined usage of fixed rows and virtual scroll May 22, 2024
@uyarn uyarn merged commit c7fe40e into Tencent:develop May 22, 2024
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants