The element-ui select drop-down box scrolls to load more

When there is too much data in the drop-down box, the loading will be very slow, so use paging to display, and achieve paging effect by listening to scrolling events.

I did it using Vue custom directives.

1. First create a js file under src to complete the writing of custom instructions

import Vue from 'vue'

export default () => {
  Vue.directive('selectScroll', {
    bind (el, binding) {
//  如上图，我通过v-if来控制了两个select框，当没有binding.arg这个参数时，我只能监听到企业类型下的select框，所以，我通过传参控制了监听的哪个select框
      var className='.'+binding.arg
      el.className=binding.arg
      // 获取滚动页面DOM
      const SCROLL_DOM = el.querySelector(`${className} .el-select-dropdown .el-select-dropdown__wrap`)
      // const SCROLL_DOM = el.querySelector(“.el-select-dropdown .el-select-dropdown__wrap“)
      SCROLL_DOM.addEventListener('scroll', function () {
        // 当前的滚动位置 减去  上一次的滚动位置
        // 如果为true则代表向上滚动，false代表向下滚动
        const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
        // 如果已达到指定位置则触发
        if (CONDITION) {
            // 将滚动行为告诉组件
            binding.value()
          }
        
      })
    }
  })
}

Can anyone tell me why custom commands cannot be used multiple times on the same page?

2. Introduce it in main.js

import Directives from './utils/select-scroll'
Vue.use(Directives)

Three, use

<el-select
  v-model="Id"
  v-selectScroll:selectName="handleScroll"   //这行最重要(传参)
  // v-selectScroll="handleScroll"   //这行最重要(不传参)
  filterable
  clearable
  placeholder="请选择"
>
  <el-option
    v-for="(item,index) in options"
    :key='index'
    :label="item.name"
    :value="item.id"
  ></el-option>
</el-select>

Because I also added the search function, there are quite a lot of problems

Refer to the official documentation:

https://cn.vuejs.org/guide/reusability/custom-directives.html