amis
amis copied to clipboard
【BUG】VirtualTableBody 虚拟表格主体组件在下滑时,只能显示一部分数据,其余为空白
描述问题:
VirtualTableBody 组件在下滑时,部分数据无法看到。
const check = () => {
const rect = header.getBoundingClientRect();
const rect2 = firstRow.getBoundingClientRect();
const scrollTop = rect.bottom - rect2.top;
setScrollTop(scrollTop);
if (scrollTop && store.tableLayout !== 'fixed') {
store.switchToFixedLayout();
}
};
这里的 scrollTop 算出来一直是 0,没有任何意义。
因为 firstRow 所在的 table 本来就和第一个 tbody 挨在一起,应该拿 trailingPlaceholderRef 来算差值。
但是就算用了 trailingPlaceholderRef
toDispose.push(
resizeSensor(wrap, () => {
itemHeight.current = tbody
.querySelector(':scope > tr')!
.getBoundingClientRect().height;
sizeRef.current = Math.min(
Math.ceil(
Math.min(isAutoFill ? wrap.clientHeight : window.innerHeight) /
itemHeight.current
),
20
);
check();
})
);
这里会重复状态更新,导致重新渲染,因为 check 函数先正确更新了 scrollTop,随之 offset、start 也相应更改,应用到了 style,因此 ResizeObserver 监听到了又更改了 scrollTop。
截图或视频:
我的截图
isAutoFill为 false。
如何复现(请务必完整填写下面内容):
- 你是如何使用 amis 的?
sdk
- amis 版本是什么?请先在最新 beta 版本测试问题是否存在
6.13.0
- 粘贴有问题的完整
amis schema代码:
code here...
- 操作步骤 请简单描述一下复现的操作步骤...
👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.
Please review the labels and make any necessary changes.