前言

日常开发中我们经常用到选择器，比如el-select，当下拉选项数据量过大时，就会影响渲染速度，甚至会把页面卡死，对于这种情况我们一般采用懒加载的形式去优化，本节我们就来实现一个懒加载选择器。

懒加载

首先我们要理解懒加载，最常见的懒加载场景就是淘宝浏览图片，当我们把手机往下滑的时候，下面图片会转圈加载一会才出来，也就是下面的图片只有在用户滚动时候才会去加载。换到选择器是一个道理，先加载出来m条数据，当用户往下查找其他数据时候再加载出n条数据，整个过程中触发加载数据的事件是滚动事件，所以我们一般通过监听滚动事件实现懒加载。了解了实现方式，我们就能实现它,具体的技术栈采用vue2+element ui。

自定义指令

为了方便，我们直接对el-select进行二次封装，具体的props参数根据项目所需定义即可，重点是监听el-select滚动条实现懒加载。在vue中实现一个功能有很多种方式，这里我们自定义一个懒加载指令，方便实现，还可以提高可复用性。vue2中使用directives定义指令，对于el-select懒加载实现流程如下：

获取el-select中滚动条盒子，我们可以用开发者工具进行查看。
很明显el-select是用el-scrollbar当作的滚动条，滚动盒子包含的类名有el-select-dropdown__wrap，我们就用这个类名，不用el-scrollbar__wrap是因为el-scrollbar用的地方比较多，用el-select相关的比较保险。
添加滚动条监听事件，当滚动条滚到一定的距离，就加载新的数据。我们可以从最简单的情况考虑，当滚动条滚动到底部才进行加载，如何判断呢？
元素可见高度+滚动条高度=元素内容高度
对应的属性值如下:
scorllHeight ------------ 元素内容高度
scrollTop ------------ 滚动条滚动高度
clientHeight ------------ 元素的可见高度
所以我们的判定条件就是：

js 复制代码

   ele.scrollHeight === ele.clientHeight + ele.scrollTop

一般我们会在滚动条到底之前就加载，滚动条到底部的这个距离我们可以设置成distance参数，根据开发需要传具体的值，最终判定条件变为：

js 复制代码

    ele.clientHeight + ele.scrollTop + distance >= e.scrollHeight

调用回调函数加载新数据。自定义指令中有binding参数，我们可以用它来执行加载新数据的事件，加载新数据的逻辑很简单，用slice去截取总的下拉数据。

js 复制代码

  // number 为加载个数
   loadMore() {
      const { length } = this.list
      this.list = this.totalData.slice(0, length + this.number)
    }

根据以上步骤我们自定义出v-lazy-load指令，用binding获取传递的参数：

然后我们在el-select中使用，注意我们要传递回调函数与参数：

接下来我们将上面的props参数补全：

到此我们就得到了一个懒加载选择器，最后我们需要优化一下过滤功能，因为列表加载的是部分数据，如果我们用el-select的filterable属性过滤的对象也是部分数据，所以我们需要自定义一下过滤方法，将过滤对象变为全部数据。

这样我们就得到了一个拥有过滤功能的懒加载选择器。

总结

我们采用了自定义指令实现了赖加载选择器，对比直接二次封装el-select，该方法更加方便，甚至可以把该指令变为全局指令，在需要的地方使用。

需求小能手——赖加载选择器

前言

懒加载

自定义指令

总结