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文件中使用

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