elementui-select懒加载+模糊搜索

element UI—select

在开发过程中，select下拉数据由于后端返回的数据量太大，打开页面时会造成非常卡断的问题，需要优化处理

一、创建一个自定义指令(v-loadmore)

export default {
    install(Vue) {
     // 滚动加载更多
     Vue.directive('loadMore', {
          bind(el, binding) {
            // 获取element，定义scroll
            let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
            select_dom.addEventListener('scroll', function () {
              let height = this.scrollHeight - this.scrollTop <= this.clientHeight;
                  if (height) {
                       binding.value()
                    }
                })
            }
        });
    }
}

二、在main.js里面全局注册一下

import loadMore from '@/utils/selectLoadmore'

三、在需要的地方引入使用

<el-form-item label=":" prop="role">
  <el-select size="small" v-loadMore="loadmore" filterable remote v-model="formObj.role" :remote-method="remoteMethodR" @visible-change="handleVisitChangeR"
   :popper-append-to-body="false" :placeholder="$t('tips.holderSelect')" :disabled="isDisabled" clearable>
    <el-option v-for="item in roleList" :label="item.label" :value="item.value" :key="item.value"></el-option>
  </el-select>
</el-form-item>
<script>
data(){
    return {
    searchCode:null,
    //定义初始值，默认加载的数量
     confing: {
           page: 1,
           size: 30,
          },
         totalPage: 0,
     },
     roleList:[]
},
created(){
  this.loadmore();
},
methods:{
//滚动加载更多
  loadmore(){
   if (this.confing.page == 1 || this.confing.page <= this.totalPage) {
        let params = {...formObj};
        Obtain.queryRole(params)
          .then((res) => {
            if (res.code === 200) {
              this.totalPage = res.data.paging.totalPages;
              let tempArr = [];
              tempArr = res.data.roleList;
              tempArr = tempArr.map((item) => {
                return { label: item.id, value: item.dbkey };
              });
              this.roleList = this.confing.page == 1 ? tempArr : [...this.roleList, ...tempArr];
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {});
      }
      this.confing.page++;
  }
}
</script>

四、模糊查询

根据elementu-UI提供的API:

为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function
visible-change 下拉框出现/隐藏时触发

remoteMethodR(val){
 if (val && val.length > 0) {
      this.confing.page = 1;
      this.roleList= [];
      this.searchCode = val;
      this.loadmore();
    } else {
       this.searchCode = "";
       this.roleList= [];
    }
},
handleVisitChangeR(val){
 if (!val) {
      this.searchCode = "";
      this.confing.page = 1;
      this.roleList= [];
    } else {
       this.loadmore();
    }
}

---

总结

以上就是对select下拉数据量太大造成页面卡顿的优化处理，有不足的地方请指教