虚拟滚动-Vue 展示巨量数据，vue-virtual-scroller 使用说明

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()})
    }
}