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

当下拉框要展示大量数据内容时，并且下拉框不展示分页，那就不能手动点击分页去获取数据，那就只能利用监听滚动事件来实现了。

image.png

1. src下新建一个文件夹，创建一个指令

import Vue from 'vue'

export default () => {
  Vue.directive('scroll', {
    bind (el, binding) {
      // 获取滚动页面DOM
      const SCROLL_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      let scrollPosition = 0
      SCROLL_DOM.addEventListener('scroll', function () {
        // 当前的滚动位置 减去  上一次的滚动位置
        // 如果为true则代表向上滚动，false代表向下滚动
        const flagToDirection = this.scrollTop - scrollPosition > 0

        // 记录当前的滚动位置
        scrollPosition = this.scrollTop
        const LIMIT_BOTTOM = 100
        // 记录滚动位置距离底部的位置
        const scrollBottom = this.scrollHeight - (this.scrollTop + this.clientHeight) < LIMIT_BOTTOM
        // 如果已达到指定位置则触发
        if (scrollBottom) {
          // 将滚动行为告诉组件
          binding.value(flagToDirection)
        }
      })
    }
  })
}

2. 在main.js中引入进来

import Directives from './directives/index'

Vue.use(Directives)

3. 当前.js文件中使用

<el-form-item label="系统诊断名称" label-width="120px">
            <el-select
              value-key="id"
              class="input-query"
              clearable
              v-model="addForm.sysDiaName"
              placeholder="请选择"
              filterable
              v-scroll="handleScroll"  // 主要是这行指令
              size="medium"
              @focus="slectDiaName"
              @change="selectDocNameId($event)">
              <el-option
                v-for="(item,index) in sysDiaList"
                :key="index"
                :label="item.zdmc"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>

data(){
  return{
    diaPagination: {
        pageSize: 50,
        pageNum: 1,
        total: 0
    }
    canmore: true
  }
},
methods:{
  // 滚动加载更多
    handleScroll() {
      this.slectDiaName()
    },
    // 获取系统诊断名称
    slectDiaName() {
      const params = {
        PageNo: this.diaPagination.pageNum,
        PageSize: this.diaPagination.pageSize,
      }
      this.$requestInternet.post('/api/xx', params).then(res => {
        if (res.data.length > 0) {
          this.diaPagination.pageNum++
          this.sysDiaList = this.sysDiaList.concat(res.data)  // 返回数据连接起来
          this.diaPagination.total = res.totalCount
        } else {
          this.canmore = false
        }
      }).catch((e) => {
        console.log(e)
      })
    }
}

第二种引入方法(项目里还有其它指令，不想重复引入及再单独新建文件)

• 1. src下新建一个文件夹，创建一个指令

export default {
  // 监听select加载更多
  scroll: {
    bind (el, binding) {
      // 获取滚动页面DOM
      const SCROLL_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      let scrollPosition = 0
      SCROLL_DOM.addEventListener('scroll', function () {
        // 当前的滚动位置 减去  上一次的滚动位置
        // 如果为true则代表向上滚动，false代表向下滚动
        const flagToDirection = this.scrollTop - scrollPosition > 0

        // 记录当前的滚动位置
        scrollPosition = this.scrollTop
        const LIMIT_BOTTOM = 100
        // 记录滚动位置距离底部的位置
        const scrollBottom = this.scrollHeight - (this.scrollTop + this.clientHeight) < LIMIT_BOTTOM
        // 如果已达到指定位置则触发
        if (scrollBottom) {
          // 将滚动行为告诉组件
          binding.value(flagToDirection)
        }
      })
    }
  }
}

• 2. 在main.js中引入进来

import directives from '@/assets/js/directives'

Object.keys(directives).forEach(item => {
  Vue.directive(item, directives[item])
})

• 3. 在页面使用方法一致

参考：https://juejin.cn/post/6844903710972182536#comment
// 下面这种方法，我在搜索时会出现重复的数据
https://www.cnblogs.com/Console-LIJIE/p/15303729.html