element选择器实现数据上拉加载功能

最近有个需求，要在选择器里渲染一些数据，数据量很大，有几万条，所以要在选择器中增加上拉加载的效果，这边用的是element组件库中的el-select组件。

可以将此细分为，1.下拉到底部； 2.触发请求； 3.加载，难点便只是在下拉到底部。

参考博主地址：http://t.csdn.cn/2mO0I

用ref获取到标签的滚动条监听滚动：

this.$refs.select.$refs.scrollbar.$refs.wrap

完整代码：

<el-select ref="select"
           v-model="stationRef.branchBank"
           filterable
           :filter-method="searchBank"
           @blur="clearSearchValue"
           v-bind="$attrs"
           clearable
           @change="changeBank($event)"
           value-key="branchBankName"
              >
                  <el-option
                      v-for="(option) in branchBankList"
                      :key="option.branchBankCode"
                      :value="option"
                      :label="option.branchBankName"
                  >{{ option.branchBankName }}</el-option>
              </el-select>
<script>
   data(){
      branchBankList:[
        {
            id:87,
            bankCode:"0105",
            bankName:"中国建设银行",
            branchBankCode:"105452208023",
            branchBankName:"中国建设银行股份有限公司青岛铁橛山路支行",
            nameLike:null,
            branchBankCodes:null
        }
    ],

   }
   mounted () {
    this.$refs.select.$refs.scrollbar.$refs.wrap.addEventListener('scroll',this.scrolling)
   },
   methods:{
    scrolling(){
      let e = this.$refs.select.$refs.scrollbar.$refs.wrap
        if(this.noMore) return
        // 到底时触发 loadMore
        let loadMore = e.scrollHeight -  e.scrollTop <=  e.clientHeight
        if(loadMore){
           this.loadMore()
          console.log('---------------');
        }
    },
    loadMore(){
      if (!this.ifLoading && !this.ifStop) {
        this.pageNum = this.pageNum + 1
        this.getBranchBank() //列表数据
      }
    },
    getBranchBank(){
       //  获取数据接口 
      this.ifLoading = true
      let params = {
        pageNum: this.pageNum,
        pageSize: 20,
        bankCode: null,
        nameLike: this.searchValue?this.searchValue:null
      }
      getBranchBank(params).then(res => {
        this.ifLoading = false
        if(res.respCode == '0000'){
          let list = res.data.list
          console.log('listlistlist',list);
          if(res.data.hasNextPage){
            this.ifStop = false  
            }
          if(res.data.list && res.data.list.length>0){
            if(res.data.pageNum > 1){
              this.branchBankList = [...this.branchBankList,...list]
              console.log('this.branchBankList',this.branchBankList);
            }  
            else{
              this.branchBankList = list
            }
          }
          else{
            this.branchBankList = []
          }
        }else{
          console.log(res.respMsg);
        }
      })
    }

   }





</script>