PrimeVue DataTable虚拟滚动器数据更新时滚动位置重置问题

安全阿岳

2026-7-2

DataTable虚拟滚动加载数据后滚动位置重置问题

DataTable的滚动位置会在数据变化时重置，但独立的Virtual Scroller组件不会出现此情况。每次滚动到fetchNextPage阈值时，DataTable的虚拟列表滚动位置都会重置到顶部（位置0），而单独使用Virtual Scroller则不会有这个问题，求原因及解决办法。

问题演示

相关代码

loadMore 函数

const loadMore = (e: VirtualScrollerLazyEvent) => {
  if (!logEvents || !logEvents.value) return;
  console.log(`loadMore ${e.first} ${e.last} ${logEvents.value?.pages.length}`);
  if (e.last > logEvents.value?.pages.length - 20) {
      console.log("fetchNextPage");
      fetchNextPage();
  }
}

独立Virtual Scroller组件代码

<VirtualScroller :items="logEvents?.pages" :loading="isLoading || isFetchingNextPage" :item-size="50"
        :showLoader=true class="border-1 surface-border border-round" style="width: 200px; height: 500px" lazy
        v-on:lazy-load="loadMore">
        <template v-slot:item="{ item, options }">
            <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
                {{ options.index }} - {{ item.objectName }}</div>
        </template>
        <template v-slot:loader="{ options }">
            <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
                <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
            </div>
        </template>
</VirtualScroller>

DataTable组件代码

<DataTable :value="logEvents?.pages" :loading="isLoading || isFetchingNextPage" scrollable scrollHeight="500px"
        tableStyle="min-width: 50rem" :virtualScrollerOptions="{
            lazy: true,
            onLazyLoad: loadMore,
            itemSize: 50,
        }">
        <Column field="objectName" sortable header="Object" style="height:50px">
            <template #body="{ data, index }">
                <span>{{ index }} : {{ data.objectName }}</span>
            </template>
            <template #loading>
                <div class="flex align-items-center" :style="{ height: '50px', 'flex-grow': '1', overflow: 'hidden' }">
                    <Skeleton width="60%" height="1rem" />
                </div>
            </template>
        </Column>
    </DataTable>

问题原因

数据源更新方式问题：如果fetchNextPage返回数据后直接替换了logEvents.pages数组（而非追加数据），DataTable的虚拟滚动组件会认为数据源完全变更，触发重新初始化，导致滚动位置重置。独立Virtual Scroller对数组增量更新的处理逻辑更完善，不会因为追加数据触发重置。
DataTable内部DOM重渲染：DataTable在数据更新时，可能会同步更新表格的列结构、表头状态等，这些操作会间接导致滚动容器的DOM重置，丢失之前的滚动位置。而独立Virtual Scroller的DOM结构更简单，没有额外的表格逻辑干扰。
虚拟滚动配置缺失：DataTable的virtualScrollerOptions中没有配置滚动位置保留相关参数，而独立Virtual Scroller可能默认启用了该特性。

解决办法

增量更新数据源：确保fetchNextPage获取新数据后，是将新数据追加到现有数组中，而非直接替换：

// 错误示例：直接替换数组
logEvents.value.pages = newData;
// 正确示例：追加数据
logEvents.value.pages.push(...newData);

手动保存并恢复滚动位置：在加载新数据前后手动记录和恢复滚动位置：

const loadMore = (e: VirtualScrollerLazyEvent) => {
  if (!logEvents || !logEvents.value) return;
  // 保存当前滚动位置
  const scrollContainer = document.querySelector('.p-datatable-scrollable-body');
  const scrollTop = scrollContainer?.scrollTop || 0;

  if (e.last > logEvents.value?.pages.length - 20) {
      fetchNextPage().then(() => {
          // 数据加载完成后恢复滚动位置
          nextTick(() => {
              scrollContainer?.scrollTo(0, scrollTop);
          });
      });
  }
}

配置虚拟滚动保留滚动位置：检查PrimeVue文档，若支持相关参数，在virtualScrollerOptions中添加：

:virtualScrollerOptions="{
    lazy: true,
    onLazyLoad: loadMore,
    itemSize: 50,
    preserveScrollPosition: true // 若PrimeVue支持该参数
}"

避免不必要的组件重渲染：检查DataTable是否绑定了不稳定的key属性，若有则改为稳定标识，防止数据更新时组件完全重渲染。

内容的提问来源于stack exchange，提问作者snoop