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

青旅半醒 2023-10-08 22:44 39阅读 0赞

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

<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;