el-select下拉加载（实现懒加载）

Posted 2021-12-05 wangxiaoer5200

情况：项目出现了下拉数据量过大，出现页面卡死问题，反馈到我这；
当时实现思路1.使用render函数去渲染下拉框 
试了发现卡死情况依然存在，所以尝试方法2

2.使用原生js去添加下拉框的<option>
页面卡死情况没了，但是变成原生select，数据量大 很难找到对应的人 要下拉去找很久；
只能说不完美  没达到我预想。

百度了 发现一篇地址：https://segmentfault.com/a/1190000017812498?utm_source=tag-newest 下拉懒加载的操作，我就借鉴了 
实现代码：

<el-select 

v-model="userId"

:filterable=‘true‘

:default-first-option=‘true‘

v-el-select-loadmore="loadmore"

placeholder="请选择用户">

<el-option

v-for="(item,index) in userItems"
:label="item.name"

:value="item.id"

:key="index"></el-option>

</el-select>

data(){

return {

userItems: [],//下拉数组

      formData: {   //下拉参数

        pageIndex: 1,

        pageSize: 20

      },
users:[]  //总数组

}

}

 

一个指令v-el-select-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() {

          const condition =

            this.scrollHeight - this.scrollTop <= this.clientHeight;

          if (condition) {

            binding.value();

          }

        });

      }

    }

  },

 

一个方法：loadmore

// 下拉加载

    loadmore() {

      this.formData.pageIndex++;

      this.getUsers(this.formData);

    },

 

 getUsers(v) {

      let num = ~~this.formData.pageIndex * ~~this.formData.pageSize;

      this.userItems = this.users.filter((item, index, arr) => {

        return index < num;

      });

    },

 

如此实现刚进页面显示前20条数据，往下滚动显示更多数据，就实现了懒加载。

还有几个待优化点：1下拉搜索是已加载的数据中找，而不是全部数据。2已选中未加载数据怎么办;

别的不多说 我去优化了。可能有后续，发现自己变懒了 博客变少了。