vue+element select组件结合vue-virtual-scroll-list插件解决数据量太大，导致渲染过慢

杨小凹

已于 2022-05-24 11:09:53 修改

阅读量5.7k

点赞数 5

文章标签： vue.js javascript elementui

于 2022-05-24 01:16:54 首次发布

本文链接：https://blog.youkuaiyun.com/aiyang1214878408/article/details/124938428

版权

场景

因为项目中数据量有时候过于庞大，使用elementui的select组件时，会导致下拉框加载数据蛮并且卡顿甚至于卡死，为解决这个问题，发现vue-virtual-scroll-list这个插件，地址 https://www.npmjs.com/package/vue-virtual-scroll-list ，用来模拟虚拟滚动，从而解决问题。

安装

    npm install vue-virtual-scroll-list --save

引入

    // 单个文件引入
    import virtualList from 'vue-virtual-scroll-list'
    
    // 注册组件
    components: {
    'virtual-list': virtualList }

基础用法

一、要用这个插件去包裹需要循坏展示的标签。这里就是el-option标签

<el-select v-model="mediaAccount" popper-class="virtualSelect">
    <virtual-list style="max-height: 245px; overflow-y: auto;"
        :data-key="'id'"
        :data-sources="mediaAccountArr"
        :data-component="itemComponent"
        :keeps="20"
        :extra-props="{
   
            label: 'mediaAccountId',