vue-virtual-scroller使用分享，具体使用方式请参考官方文档

1、问题

在实际工作中需要解决一个展示巨量数据列表的问题，数据有 10万多条。刚开始我是直接让它渲染的，可想而知带来的是页面卡顿，dom渲染时间长，数据处理其实只用了不到 100ms。此时为了用户体验不得不寻求解决办法，于是一番百度之后我决定使用vue-virtual-scroller。它主要能实现的功能是，能处理巨量列表的展示。原理是把当前窗口高度内的数据渲染出来，超出部分就回收掉。

2、在 vue中vue-virtual-scroller` (Vue2)

1. 安装 (使用NPM安装)

npm i vue-virtual-scroller

2. vue 中引入 vue-virtual-scroller

// 在 main.js 中引入 vue-virtual-scroller
import "vue-virtual-scroller/dist/vue-virtual-scroller.css" // 引入 css
import VueVirtualScroller from "vue-virtual-scroller" // 引入插件
Vue.use(VueVirtualScroller)   //全局注入

vue-virtual-scroller 中包含这几个组件，具体都能做什么可以看官方文档，这里只介绍 RecycleScroller

• RecycleScroller
• DynamicScroller
• DynamicScrollerItem

3. 使用

    <recycle-scroller
    class="virtual-list"
    style="height: 400px"
    :item-height="100"
    :items="tableData">
    <template v-slot="{ item, index }">
        <div class="list-item" :key="item.id">
            <p class="mr-2">{{ item.id }}</p>
            <p>{{ item.name }}</p>
        </div>
    </template>
</recycle-scroller>
//<script>部分
data() {
    return {
        tableData: []
    }
},
created() {
    for (let i = 0; i < 100000; i++) {
        this.tableData.push({id: i, name: Math.random()})
    }
}

注意！！！！！ ： 这里需要特别注意， recycle-scroller 组件必须设置高度,提前计算或给定固定高度，必须设置！ recycle-scroller 的接收参数说明：官方文档

prop	解释
item-height	元素高度，默认：null
items	数组，列表数据源

v-slot 可以为以下几个值： 官方文档

prop	解释
item	展示中的元素个体
index	返回每个元素在 items 中的位置 inex
active	元素是否处于 active 状态

4、至此大功告成