实现select下拉框的无限加载（懒加载）

在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿（如在我在一次迭代中有一个select项接口返回了5000多条数据）。用户体验差！结合实际开发给出了3个解决方案：

　　方案1、select的无限加载；

　　方案2、select的分段加载；

　　方案3、select的模糊查询（此方案如有大量数据，对用户体现不友好）

　此次介绍第一种方案select的无限加载，首先我们需要考虑到功能以后是否复用，本人考虑到以后可能复用次功能，在main.js自定义全局

directive指令。代码如下：

 

Vue.directive('loadMore', {

  bind(el, binding) {

    // 获取element-ui定义好的scroll盒子

    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()

      }

    })

  }

})

注：scrollHeight 获取元素内容高度(只读)

　　scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.

　　clientHeight 读取元素的可见高度(只读)

　　如果元素滚动到底, 下面等式返回true, 没有则返回false
　　scrollHeight - scrollTop === clientHeight

 

　data（）{

　　return {

　　　activityNames: [], // 请求

      　 activityList: [], 过滤后的数据

     　  formData: { // 分页 一页20条

       　　 pageIndex: 1,

       　　 pageSize: 20,

    　　}

　　}

　}

 

　HTML:

            <el-select

              v-model="dataName"

              clearable

              placeholder="请选择活动名称"

              @change="interests_activityName"

              filterable

              v-loadMore="loadMore"

            >

              <el-option

                v-for="item in activityList"

                :key="item.data_code"

                :label="item.data_value"

                :value="item.data_code"

              ></el-option>

　　

　　Js:

　　// 自定义指令

    loadMore() {

      this.formData.pageIndex++;

      this.activity_sceneNameData(this.formData);

    },

 

    //活动名称

    activity_sceneNameData() {

         let that = this;

        that.dataName = "";

        that.activityNames = [];

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

        request.activityNameData().then((res) => {

          that.activityNames = res.data

          that.activityList = that.activityNames.filter((item, index, arr) => {

            return index < num;

          });

        })

   },

下篇：select的分段加载；若有帮助请关注！！！