element 下拉数据过多，导致列表卡顿加载慢，使用虚拟列表方式

element 下拉数据过多，导致列表卡顿加载慢，使用虚拟列表方式渲染，无需分页

效果图：

 

 看起来是加载全部，实际上只是数据是全部数据，DOM上面的却一直是可视窗口内可见的条数，这些条数根据视框高度自动控制。

下面上一下步骤代码：
准备工作：安装 vxe-table   vxe-table v3  可根据需求按需求加载

我项目里 因为用到的虚拟表格多 我事全局引入，这个根据个人需求来

npm install xe-utils vxe-table@legacy

 import Vue from 'vue'
 import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'

 Vue.use(VXETable)

使用虚拟列表 组件  vxe-list

下面是elment-ui  el-select 结合 vxe-list 的虚拟下拉组件代码

<template>
  <div>
    <el-select :value="defaultValue" popper-class="virtualselect" filterable :filter-method="filterMethod" @visible-change="visibleChange" v-bind="$attrs" v-on="$listeners">
        <vxe-list class="my-list" height="200" v-if="bool" :data="selectArr">
          <template #default="{ items }">
            <el-option v-for="item in items" :key="item" :label="item" :value="item">
          </el-option>
          </template>
        </vxe-list>
    </el-select>
  </div>
</template>
<script>
export default {
  model: {
    prop: 'defaultValue',
    event: 'change',
  },
  props: {
    //数组
    list:{
      type: Array,
      default () {
        return []
      }
    },
    //显示名称
    label:{
      type: String,
      default:''
    },
    //标识
    value:{
      type: String,
      default:''
    },
    defaultValue: {
      type: String | Array,
      default: ''
    },// 绑定的默认值
  },
  mounted() {
    this.init();
  },
  watch: {
    'list'() {
      this.init();
    }
  },
  data() {
    return {
      selectArr:[],
      bool:false,
    }
  },
  methods: {
    init() {
      this.selectArr = this.list;
    },
    // 搜索
    filterMethod(query) {
      if (query !== '') {
        setTimeout(() => {
          this.selectArr = this.list.filter(item => {
            return item.indexOf(query) > -1;
          });
        },100)
      } else {
        this.init();
      }
    },
    visibleChange(bool) {
      this.bool = bool
      if(!bool) {
        this.init();
      }
    }
  }
}
</script>
<style lang="less" scoped>
.virtualselect {
  // 设置最大高度
  &-list {
    max-height:245px;
    overflow-y:auto;
  }
}
</style>

使用的地方引入方法

import cwSelect from '/virtualSelect'

components: { cwSelect },

<cw-select style="width: 94%" @change="selectHander"  :list="optionslist" v-model="content1"  placeholder="请选择下拉数据"  clearable ></cw-select>

//如果你的list 是
[{label:'标签',code:'111'}]
则需要手动传入 label  value  的取值字段 
option 循环中则 使用 item[lable] item[code]
我的数据是 [1,2,3,4,5,]
所以我的option 直接是 item

总结：list的值是自己的数据。label 和value和v-model和原来的el-select属性一样。其他的也一样用就好了，比如这个clearable 要清除的直接写上去，disabled也是一样，原来的el-select属性怎么加这个就怎么加上去。基本能满足一般需求。试试吧