select下拉框滚动加载

element-ui版本使用自定义指令：

main.js：

// 滚动加载更多
Vue.directive('loadMore', {
  bind(el, binding) {
    // 获取element，定义scroll
    let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
    select_dom.addEventListener('scroll', function () {
      let height = this.scrollHeight - this.scrollTop == this.clientHeight;
      if (height) {
        binding.value()
      }
    })
  }
})

组件中：

<template>
  <el-select class="my-el-select"  v-model="xxx" placeholder="xxx" @change="change" 
  :filter-method="filterMethod" v-loadMore="loadMore" clearable filterable>
      <el-option v-for="item in list" :key="item.id" :label="item.name"  
      :value="item.id">
      </el-option>
  </el-select>
</template>

<script>
  ...

  methods: {
    // 加载更多
    loadMore () {
      this.pageNum++
      // 获取列表
      this.getList()
    },

    // 搜索
    filterMethod(val) {
      this.getList()
    },

    // 事件
    change (val) {
      ...
    }
  }
</script>

antd-vue 版本

<template>
    <a-select show-search allowClear  v-model="xxx"  placeholder="请选择" 
      style="width: 200px" :show-arrow="false"  :filter-option="false"  :not-found- 
      content="null" :options="List"  @popupScroll="handlePopupScroll"  
      @search="handleSearch" />
</template>

<script>
  ...
  
   methods: {
      // 搜索
      handleSearch(value) {
        // 获取列表
        this.getList()
      },

      //  滚动加载
      handlePopupScroll(value) {
        const { scrollHeight, scrollTop, clientHeight } = value.target;
        console.log(scrollHeight, scrollTop, clientHeight)
        if (scrollHeight - scrollTop === clientHeight) {
          this.pageNum++;
          // 获取列表
          this.getList();
        }
      }
    }
</script>