el-select 数据懒加载

1.使用全局引入

在utils文件夹中写好directives.js

import Vue from 'vue'

Vue.directive("el-select-loadmore", {

  bind (el, binding) {

    // 获取element-ui定义好的scroll盒子

    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');

    SELECTWRAP_DOM.addEventListener('scroll', function () {

      const CONDITION = this.scrollHeight - this.scrollTop <= (this.clientHeight + 2);//因为我的每次差1px，我就加了2

      if (CONDITION) {

        binding.value()

      }

    })

  }

})

2.全局引入import '@/utils/directives.js'//select数据懒加载

3.组件中使用

上代码

  loadmore1(){
    let index=this.plateName.pageNum++;//滚动时页码自动+1
    if(index * this.plateName.pageSize < this.totalSeletnNum) {
          this.getPlatformNameList()
    } },
//请求的数据也是分页式的  totalSeletnNum 代表着总条数 ； index * this.plateName.pageSize < this.totalSeletnNum  计算请求的截至条件
//请求接口
  getPlatformNameList(){
        this.plateName.data =this.queryParams.data.platformName
         getPlatformNameList(this.plateName).then(res=>{
           this.plateList = [... this.plateList, ...res.data.content];
           this.totalSeletnNum = res.data.totalSize
         }).catch(function () {
            
         })
      },

//关键字请求
   getDataplateName(keyword){
           this.queryParams.data.platformName = keyword
           this.plateList=[],
            this.plateName.pageNum=1,
           this.getPlatformNameList()  
        },
/

特别感谢工作中帮助我的同事以及对我的包容，差不多一周搞好这一个功能，若能帮助到大家我很高兴