Tencent / tdesign-react

A React UI components lib for TDesign.
https://tdesign.tencent.com/react
MIT License
821 stars 318 forks source link

[Tree] 虚拟滚动高度问题 #2956

Closed TeresaRd closed 1 month ago

TeresaRd commented 3 months ago

tdesign-react 版本

1.7.5

重现链接

[复现链接](https://stackblitz.com/edit/react-gljdsw?file=src%2Fdemo.tsx)

重现步骤

<Tree data={store.data} hover line transition scroll={{ type: 'virtual', isFixedRowHeight: true, rowHeight: 18, threshold: 200 }} style={{ height: '600px' }} load={load} label={getLabel} onClick={onClick} />

.t-treeitem { height: 18px; padding: 0 0 0 calc(var(--td-comp-margin-l) * var(--level)); .t-treelabel { margin-left: 0; padding: 0; } }

image

滚动一段距离后,底部出现六百,和设置的滚动高度不匹配

期望结果

在修改了Tree组件默认行样式后,指定了行高度,期望内容高度和设置的scroll height一致

实际结果

没有按指定的行高度计算虚拟滚动,改变了组件默认的样式后,就会出现内容高度与滚动高度不匹配的问题

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

flex-grow: 1的div下的Tree组件,设置了虚拟滚动,高度600px,滚动后实际内容高度只有四百多

自定义样式:

.t-treeitem { height: 18px; padding: 0 0 0 calc(var(--td-comp-margin-l) * var(--level)); .t-treelabel { margin-left: 0; padding: 0; } }

github-actions[bot] commented 3 months ago

👋 @TeresaRd,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

TeresaRd commented 3 months ago

复现链接 https://stackblitz.com/edit/react-gljdsw?file=src%2Fdemo.tsx

uyarn commented 1 month ago

fixed 1.8.0, thanks for @huangchen1031 🌹