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
      },
      typeTotal: 0,
      selectLoading: false,
    };
  },
  methods: {
    // 获取后端数据
    getAdGroupList() {
      this.selectLoading = true

      const params = {

            page: this.adGroupQuery.currentPage,

            pageSize: this.adGroupQuery.pageSize,

            param: {

                adGroup: this.adGroupQuery.adGroup

            }

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

  },
 

三、组件绑定属性。

 <el-select

        v-model="form.materialId"

        v-el-select-loadmore="loadmore"

        placeholder="请输入AD组查询"

        filterable

        remote 

        clearable

        :remote-method="remoteMethod" 

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