el-select数据太多造成页面卡顿？el-select实现触底加载

当我们使用el-select下拉框的时候，会遇到后端放回的数据太过庞大（成千上万条），导致页面渲染的时候造成卡顿现象。这时候我们可以利用触底加载方法减少资源的消耗，避免页面卡顿。

思路：这时候我们可以利用vue的自定义指令，监听到他的下拉滚动事件，当滚动到最后时，（下拉宽高度+可滑动高度距离底部的距离 > 可滑动高度）把数组变大就行了

1、我这里用的是局部注册

directives: {
    loadmore: {
      inserted(el, binding) {
        const dom = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        dom.addEventListener("scroll",function(e){
          const condition =
            this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      },
    },
  }

复制

2、使用方法

<el-select
               v-model="a"
                placeholder="请选择或搜索"
                clearable
                filterable
                value-key="id"
                :filter-method="filterMethod"
                @clear="clearMethod"
                v-loadmore="loadmore"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
</el-select>
export default{
　　data(){
　　　　return {
　　　　　　AllOptions:[],//全部数据
　　　　　　options:[],//取部分数据
　　　　　　a:""，
　　　　　　num:1
　　　　}
　　}
　　methods:{
　　　　　/**触底后的方法*/

　　　　　　loadmore(){

　　　　　　　　

　　　　　　　　//例如下拉框滚动触底后，将全部的数据使用slice切割数组,我这里是每次增加100条

　　　　　　　　this.num++

      　　　　 this.options= (this.AllOptions|| []).slice(0, this.num * 100)

　　　　　　},

　　　　　　/**这个是搜索方法(你可以忽略) */

　　　　　　filterMethod(query){

      　　　　if(query){

       　　　　 this.options= this.AllOptions.filter(i=>{

        　　　　  return i.name.includes(query)

       　　　　 })

      　　　　}else{

       　　　　 this.options= (this.AllOptions|| []).slice(0,this.num * 100)

      　　　　}

    　　　　},

　　　　　　　

　　　　　　clearMethod(){

　　　　　　　　//我清除后默认前100条

      　　　　this.options= (this.AllOptions|| []).slice(0,100)

    　　　　}

　　}
}

复制

如果你觉得对你有帮助，请点个赞支持一下谢谢！！！