vue el-select数据量太大，导致浏览器崩溃解决办法

下拉数据量太大，浏览器单线程渲染时间较长，会导致浏览器崩溃。为了解决这一问题，可以采用懒加载形式，完美解决

<el-col :span="24">
              <el-form-item label="入库物资"  prop="mids">
                  <el-select v-model="mids" value-key="matId" multiple collapse-tags filterable :filter-method="filterMethod" placeholder="请选择需要入库的物资"
                  :popper-append-to-body="false"
                  v-el-select-loadmore="loadmore" 
                  ref="containerSelect"
                  @change="selectChanged($event)"
                  style="width: 100% ">
                    <el-option
                      v-for="item in materialList"
                      :key="item.matId"
                      :label="`${item.matName}`"
                      :value="item">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>

以上是下拉框代码段

:filter-method="filterMethod"自定义筛选方法，支持筛选

v-el-select-loadmore="loadmore" 懒加载方法

directives: {
    'el-select-loadmore':{
      bind(el, binding){
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        SELECTWRAP_DOM.addEventListener('scroll', function(){
          /**
            * scrollHeight 获取元素内容高度(只读)
            * scrollTop 获取或者设置元素的偏移值，常用于计算滚动条的位置，当一个元素的容器没有产生垂直方向的滚动条，那它的scrollTop值默认为0
            * clientHeight 获取元素的可见高度(只读)
            * 如果元素滚动到底，下面的等式返回true,没有则返回false
            * 
          **/
          const condition = (this.scrollHeight - this.scrollTop) <= (this.clientHeight+10);
          if(condition){
            binding.value();
          }
        })
      }
    }
  },

以上代码段跟data()同级别

data() {
    return {
    //懒加载下拉列表--start
      resourceTotal:0,
      resourceNum:1,
      resourcePage:10,
      resourceName:'',
      resourceOption:[],
    //懒加载下拉列表--end
}
}

/** 查询物资列表 */
    getListNoPage() {
      matListNoPage(this.query).then(response => {
        this.materialAllList = response.data;
        this.resourcePage = 10
        this.resourceNum = 1
        //由于物资太多，默认展示前500条
        this.materialList = response.data.slice(0,this.resourcePage);
        this.resourceTotal = this.materialList.length;
        this.resourceOption = this.materialAllList
      });
    },
    filterMethod(query){ //query是输入的关键字
        this.resourceName = query
        this.resourcePage = 10
        this.resourceNum = 1
        if(query == ''){            
            this.materialList = this.materialAllList.slice(0,this.resourcePage)
            this.resourceOption = this.materialAllList
        }else{
            let result = [] //存储符合条件的下拉选项
            this.materialAllList.forEach(val=>{
                if(val.matName.indexOf(query)!=-1) result.push(val)
            })
            this.resourceOption = result
            this.materialList = result.slice(0,this.resourcePage) //只取前500个
        }
        this.resourceTotal = this.materialList.length;
       //下拉选项更改的时候设置滚动条高度为0
        this.$refs.containerSelect.$refs.scrollbar.wrap.scrollTop = 0;
    },
    //懒加载下拉列表--start
    loadmore(){
      if(this.resourceTotal === this.resourcePage){
        this.resourceNum++;
        this.searchLoadResource();
      }
    },
    searchLoadResource(){
      let result = []
      if(this.resourcePage*this.resourceNum < this.resourceOption.length){
        result = this.resourceOption.slice(this.resourcePage*(this.resourceNum-1),this.resourcePage*this.resourceNum)
      }else{
        result = this.resourceOption.slice(this.resourcePage*(this.resourceNum-1),this.resourceOption.length)
      }
      this.resourceTotal = result.length;
      if(this.materialList.length > 0){
        var pushFlg = '';
        // 这个循环是因为下拉框滚动条的时候，有时会揍两遍方法，导致数据重复添加
        // 循环中的判断是为了不让数据重复添加
        for(var i =0; i < result.length; i++){
          if(this.materialList.findIndex(item => item.matId === result[i].matId) < 0){
            pushFlg = 'push';
            break;
          }
        }
        if(pushFlg === 'push'){
          this.materialList = this.materialList.concat(result);
        }
      }else{
        this.materialList = result;
      }
    },
    //懒加载下拉列表--end

下拉选项变化时候涉及到滚动条定位问题，el-select设置滚动条再最顶端，复制下面代码即可

//下拉选项更改的时候设置滚动条高度为0
        this.$refs.containerSelect.$refs.scrollbar.wrap.scrollTop = 0;