element-ui select下拉框滚动加载更多

当下拉框数据过多时,加载会非常慢,所以使用分页去显示,通过监听滚动事件来达到分页效果。

我是使用Vue自定义指令来做的。

一、首先在src下创建一个js文件，完成自定义指令的编写

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

有没有大神告诉我，自定义指令为啥在同一个页面不能使用多次？

二、在main.js中引入进来

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

三、使用

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

因为我还加了搜索功能,问题还算挺多的

参考官方文档:

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

element-ui select下拉框滚动加载更多

猜你喜欢