element el-select 数据太多导致卡顿解决方案

在大量数据情况下，el-select的平滑查看数据和搜索数据

须知：
filter-method（自定义搜索方法）为el-select自带的属性
v-el-select-load-more为自定义指令 ======> 解决了一次性渲染大量数据问题
this.examPaperSelStore.list为总数据
paperList为下拉列表的数据
rangeNumber为下拉框滚动到底部后新增的条数

<el-select v-model="record.paperArr" multiple filterable clearable placeholder="请选择" :filter-method='examPaperFilter' v-el-select-load-more:rangeNumber="loadMoreFun(rangeNumber)" style="width: 100%;">
          <el-option
              v-for="item in paperList.slice(0, rangeNumber)"
              :key="item.id"
              :label='item.id + "-" + item.name'
              :value="item.id">
          </el-option>
</el-select>

export default {
   data() {
      return {
        paperList: [], //展示在下拉框内的数据
        rangeNumber: 20 //下拉框滚动到底部后新增的条数
      }
   },
  //监听el-select绑定的数据
  watch: {
   'record.paperArr'(newVal,oldVal){
       // 清空输入框后重新给下拉内容赋值 (我这里的el-select是在dialog内，所以加了dialogAddVisible 和dialogUpdateVisible的判断,因为record.paperArr是数据所以要判断长度是否为0)
       if((this.dialogAddVisible || this.dialogUpdateVisible) && (!newVal || newVal.length === 0)) {
            this.paperList = this.examPaperSelStore.list;
       }
    },
  },
  //注册一个自定义指令 `v-el-select-load-more`
  directives:{
    'el-select-load-more':{
        bind(el, binding) {
          // 获取element-ui定义好的scroll盒子
          const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
          SELECTWRAP_DOM.addEventListener('scroll', function () {
              /**
              * scrollHeight 获取元素内容高度(只读)
              * scrollTop 获取或者设置元素的偏移值,常用于计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
              * clientHeight 读取元素的可见高度(只读)
              * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
              * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
              */
              const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
              if (condition) binding.value()
          });
        }
     }
  },
  methods: {
    loadMoreFun(n){
        //每次滚动到底部可以新增条数
        return () => this.rangeNumber += this.addNumber 
    },
    examPaperFilter(val) {
       //this.examPaperSelStore.list为获取到的全部数据
       this.paperList = this.examPaperSelStore.list;
       if (val) {
            this.paperList = this.paperList.filter(item => {
                //由于我这里展示的是id和name的拼接的内容，所以检测id和name是否包含的输入的内容
                if(item.name.includes(val) || item.id.toString().includes(val)){
                     return item;
                }
            })
       }
    }
  }
}

参考地址： el-select的数据太多时候导致卡顿

修改时，展示已选中的选项（已使用上面的解决方法的情况下）

// 解决方案是：在展示前，循环总数据把选中的放在paperList的最前面
let paperArr = [1,2,3];
this.record = {
    paperArr: paperArr
};
for (const item of this.examPaperSelStore.list) {
     if (paperArr.indexOf(item.id) !== -1) {
           this.paperList.splice(0,0, item)
     } else {
           this.paperList.push(item);
     }
}