vue2+element-ui 实现下拉框滚动加载

一、自定义滚动指令。

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

  bind(el, binding) {

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

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

      /**

        * scrollHeight 获取元素内容高度

        * scrollTop 获取或者设置元素的偏移值，常用于计算滚动条的位置，当一个元素的容器没有产生垂直方向的滚动条，那它的scrollTop值默认为0

        * clientHeight 获取元素的可见高度

        * 如果元素滚动到底，下面的等式返回true,没有则返回false

      **/

      const condition = (this.scrollHeight - this.scrollTop) <= (this.clientHeight + 10);

      if (condition) {

        binding.value();

      }

    })

  }

});

二、绑定方法。

 data() {
    return {
      adGroupList: [],
      adGroupQuery: {
          pageNum: 1,
          pageSize: 10
      },
      adGroupTotal: 0,
      selectLoading: false,
    };
  },
  methods: {
    // 获取后端数据
    getAdGroupList() {
      this.selectLoading = true

      const params = {

            page: this.adGroupQuery.pageNum,

            pageSize: this.adGroupQuery.pageSize,

            param: {

                adGroup: this.searchForm.adGroup

            }

       }
      this.$api.getADGroupList(params).then(
        response => {
          this.selectLoading = false
          this.adGroupList = [...this.adGroupList, ...response.result];
          this.adGroupTotal = response.count
        }
      );
    },
    
    //下拉框搜索方法
    remoteMethod(query) {
      this.searchForm.adGroup= query
      this.adGroupQuery.pageNum = 1
      this.adGroupList= []
      this.getADGroupList()
    },
    
    //滚动加载
    loadmore() {
      if (this.adGroupTotal > this.adGroupList.length) {
        this.adGroupQuery.pageNum++;
        this.getADGroupList();
      }
    }

  },
 

三、组件绑定属性。

 <el-select

        v-model="searchForm.adGroup"

        v-el-select-loadmore="loadmore"

        placeholder="请输入AD组查询"

        filterable

        remote 

        clearable

        :remote-method="remoteMethod" 

         style="width:100%">
        <el-option v-for="(item, index) in adGroupList" :key="index" :label="item.name" :value="item.id">
     </el-option>
 </el-select>