amis icon indicating copy to clipboard operation
amis copied to clipboard

【BUG】VirtualTableBody 虚拟表格主体组件在下滑时,只能显示一部分数据,其余为空白

Open Taoister39 opened this issue 6 months ago • 1 comments

描述问题:

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,随之 offsetstart 也相应更改,应用到了 style,因此 ResizeObserver 监听到了又更改了 scrollTop

截图或视频:

我的截图 isAutoFill 为 false。

Image

如何复现(请务必完整填写下面内容):

  1. 你是如何使用 amis 的?

sdk

  1. amis 版本是什么?请先在最新 beta 版本测试问题是否存在

6.13.0

  1. 粘贴有问题的完整 amis schema 代码:
code here...
  1. 操作步骤 请简单描述一下复现的操作步骤...

Taoister39 avatar Aug 26 '25 04:08 Taoister39

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

github-actions[bot] avatar Aug 26 '25 04:08 github-actions[bot]