Select下拉选择器实现懒加载和无限加载_选择器加载的几种情况

情况：项目出现了下拉数据量过大，一次加载数据量过大的时候，出现页面卡死问题

这时我们希望做到分页加载，即懒加载的情况，可以先在下拉框中加载20条，当滚动条滚动到底部的时候，我后再请求出具再加载20条这样子

实现方法：首先要自定义一个指令，这样来获取元素的滚动条是否触底，触底之后就请求数据，然后把新请求的第二页的数据拼接到原来的数据上

自定义触底指令

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

        /*
        * scrollHeight 获取元素内容高度(只读)
        * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
        * clientHeight 读取元素的可见高度(只读)
        * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
        * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
        */
        const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
         //如果这个判断为true说明触底了
        if(CONDITION) {
          binding.value();//这里是绑定的加载更多的函数，即触发再次请求数据
        }
      });
    }
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

使用自定义指令方法

//绑定request(加载更多的函数)，在请求完第二页数据的时候，将新数据和options拼接就可以了
<el-select v-model="value" placeholder="请选择" v-loadmore='request'>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
1
2
3
4
5
6
7
8
9