npm i vue-virtual-scroller
vue2 中main.js引入 vue-virtual-scroller
import "vue-virtual-scroller/dist/vue-virtual-scroller.css"
import VueVirtualScroller from "vue-virtual-scroller"
Vue.use(VueVirtualScroller)
vue3 main.js使用 vue-virtual-scroller
import "vue-virtual-scroller/dist/vue-virtual-scroller.css"
import VueVirtualScroller from "vue-virtual-scroller"
app.use(VueVirtualScroller)
使用
<recycle-scroller
class="virtual-list"
:buffer="1000"
:prerender="200"
style="height: 400px"
:item-size="24"
key-field="id"
:items="tableData">
<template v-slot="{ item, index }">
<div class="list-item" :key="index">
<span>{{ item.id }}</span>
<span>{{ item.name }}</span>
</div>
</template>
</recycle-scroller>
import { RecycleScroller } from 'vue-virtual-scroller'
data() {
return {
tableData: []
}
},
created() {
for (let i = 0; i < 100000; i++) {
this.tableData.push({id: i, name: Math.random()})
}
}