element-ui-解决下拉框数据量过多问题（vue-virtual-scroll-list）

参考链接：vue插件 vue-virtual-scroll-list解决数据量太大问题 - 知乎

vue-virtual-scroll-list与selectLoadmore对比：

vue-virtual-scroll-list：一次性返回所有数据。即数据量适中，几千到一两万条，可一次性被后台接口返回的情况下，建议使用vue-virtual-scroll-list。

selectLoadmore：可懒加载下拉框，数据量超级大，几万甚至十几万条以上，后台无法一次性返回，只能分页加载的情况下，建议使用selectLoadmore。

一、第一步：安装

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

二、第二步：封装最底层组件

/components/virtualScrollList/select.vue

<template>
    <div>
        <el-select :placeholder="!disabled?placeholder:'——'" :disabled="disabled" :value="defaultValue" popper-class="virtualselect" filterable :filter-method="filterMethod" @visible-change="visibleChange" v-bind="$attrs" v-on="$listeners">
            <virtual-list ref="virtualList" class="virtualselect-list"
                :data-key="selectData.value"
                :data-sources="selectArr"
                :data-component="itemComponent"
                :keeps="20"
                :extra-props="{
                    label: selectData.label,
                    value: selectData.value,
                    isRight: selectData.isRight
                }"></virtual-list>
        </el-select>
    </div>
</template>
<script>
import virtualList from 'vue-virtual-scroll-list'
import ElOptionNode from './el-option-node'
export default {
    components:{
        'virtual-list': virtualList
    },
    model: {
        prop: 'defaultValue',
        event: 'change',
    },
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        selectData: {
            type: Object,
            default () {
                return {}
            }
        },//父组件传的值
        defaultValue: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: ''
        }
    },
    mounted() {
        this.init