admin管理员组文章数量:1318319
I'm trying to implement a virtual scroller (initially I wanted a Select component with virtual scrolling lazy but I simplified it to try to make it works) to display a list of project (id, name, customer). I have a Project endpoint which is working fine with DataTable with lazy pagination but I can't figure out how to correctly implement the virtual scroller.
Here is my code:
<script setup lang="ts">
import type { Project } from '@/core/interfaces'
import { projectService } from '@/core/services'
import type { VirtualScrollerLazyEvent } from 'primevue'
import { ref, type Ref } from 'vue'
const items: Ref<Project[]> = ref(Array.from({ length: 1000 }))
const loading: Ref<boolean> = ref(false)
const onLazyLoad = (event: VirtualScrollerLazyEvent) => {
console.log('onLazyLoad', event, items.value.length)
fetchItems(event.first, event.last)
}
const fetchItems = async (first: number, last: number) => {
loading.value = true
const skip: string = first.toString()
const limit: string = last.toString()
const params = new URLSearchParams({ skip, limit })
const res = await projectService.getLazyList(params)
items.value = res.projects
loading.value = false
}
</script>
<template>
<VirtualScroller :items="items" :itemSize="20" :loading="loading" :onLazyLoad="onLazyLoad" lazy showLoader
:delay="250" :appendOnly="true" :autoSize="true" :style="{ width: '200px', height: '400px' }">
<template v-slot:item="{ item }">
<div style="height: 40px">{{ item?.id }}</div>
</template>
</VirtualScroller>
</template>
It's only works when limit = last + first but it result to load more and more data in each call and it's not a good thing. I can't figure out what is badly implemented...
本文标签: typescriptPrimeVue 4 VirtualScroller Lazy LoadingIssue with API CallsStack Overflow
版权声明:本文标题:typescript - PrimeVue 4 VirtualScroller Lazy Loading - Issue with API Calls - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742045987a2417785.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论