PrimeVue 4 VirtualScroller懒加载：API调用异常问题求助

核心问题分析 #

1. 参数计算错误：PrimeVue VirtualScrollerLazyEvent 中，first 是可视区域第一条数据的索引，last 是最后一条的索引，你直接把 last 作为 limit 传给接口，导致每次请求的数据量越来越大。正确的 limit 应该是 last - first（当前需要加载的数据条数）。
2. 初始数据设置错误：你用 Array.from({ length: 1000 }) 创建了1000个空占位元素，这会让VirtualScroller误认为已有全部数据，打乱懒加载触发逻辑。
3. 数据更新逻辑错误：appendOnly 模式下应该追加/填充对应位置数据，而非直接替换整个数组，否则之前加载的数据会丢失。
4. 缺少总数据量配置：VirtualScroller 需要知道总数据条数（totalItems）才能正确计算滚动范围和触发懒加载的时机。

修正后的代码实现 #

<script setup lang="ts">
import type { Project } from '@/core/interfaces'
import { projectService } from '@/core/services'
import type { VirtualScrollerLazyEvent } from 'primevue'
import { ref, type Ref, onMounted } from 'vue'

const items: Ref<Project[]> = ref([])
const totalItems: Ref<number> = ref(0) // 存储总数据条数
const loading: Ref<boolean> = ref(false)

// 先获取总数据量，初始化占位数组
onMounted(async () => {
  // 假设接口支持获取总条数，可根据实际业务调整
  totalItems.value = await projectService.getTotalCount()
  // 创建对应长度的空数组，用于VirtualScroller计算滚动区域
  items.value = Array.from({ length: totalItems.value })
})

const onLazyLoad = (event: VirtualScrollerLazyEvent) => {
  fetchItems(event.first, event.last)
}

const fetchItems = async (first: number, last: number) => {
  loading.value = true
  const skip = first.toString()
  // 计算本次需要加载的数据条数
  const limit = (last - first).toString()
  const params = new URLSearchParams({ skip, limit })
  
  const res = await projectService.getLazyList(params)
  
  // 填充对应索引位置的数据，保留已加载内容
  res.projects.forEach((project, index) => {
    items.value[first + index] = project
  })
  
  loading.value = false
}
</script>

<template>
  <VirtualScroller 
    :items="items" 
    :itemSize="40" <!-- 与item实际高度保持一致 -->
    :totalItems="totalItems" <!-- 必须配置总数据量 -->
    :loading="loading" 
    :onLazyLoad="onLazyLoad" 
    lazy 
    showLoader
    :delay="250" 
    :appendOnly="true" 
    :style="{ width: '200px', height: '400px' }"
  >
    <template v-slot:item="{ item }">
      <div style="height: 40px">
        {{ item?.id }} - {{ item?.name }} - {{ item?.customer }}
      </div>
    </template>
  </VirtualScroller>
</template>

关键修正点说明 #

• totalItems 属性：必须配置，告知VirtualScroller总数据量，确保组件能正确计算滚动区域和懒加载触发时机。
• itemSize 匹配实际高度：你的item容器高度为40px，需将itemSize设为40，避免滚动时出现空白或触发时机错误。
• 数据填充逻辑：不再直接替换数组，而是根据first索引填充对应位置的数据，保留已加载内容，保证VirtualScroller渲染正常。
• limit参数修正：用last - first计算单次请求的数据量，确保每次请求的条数固定为当前可视区域所需数量。

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