为ElementPlus中el-select-v2添加scroll监听实现动态加载

在为el-select-v2下拉菜单添加动态加载功能时我发现官方并没有对外开放scroll监听接口，虽然官方有提供popper-class供我们为下拉菜单设置类名，但根据其获取的dom并不能触发scroll事件，究其原因是该dom没有设置overflow-y:scroll于是我便层层翻找，最终找到了可滚动的dom：
el-select-dropdown__list

• 下拉菜单并不是挂载在el-select-v2下，所以我们需要通过document获取
• 一个页面可能存在多个el-select，所以我们先要根据popper-class获取你当前使用的虚拟化选择器

<el-select-v2 popper-class="SelectV2AOptions"
           value-key="id"
           v-model="temp"
           filterable
           remote
           :remote-method="getData"
           :options="options"
           :loading="loading"
           @visible-change="handleSelectV2AOptionsVisible"
            />

处理函数

handleSelectV2AOptionsVisible(visible){
  const delay=200;
  //获取下拉菜单dom
  const selectV2Popper=document.querySelector('.SelectV2AOptions')
  .querySelector('.el-select-dropdown__list')
  if(visible){
    //添加数据请求事件
    selectV2Popper.addEventListener('scroll',debounce(this.handleSelectV2Scroll,delay));
  }else{
    //删除输请求事件
    selectV2Popper.removeEventListener('scroll',debounce(this.handleSelectV2Scroll,delay));
  }
  
handleSelectV2Scroll(){
  const selectV2Popper=document.querySelector('.SelectV2AOptions')
  .querySelector('.el-select-dropdown__list')
  const scrollTop=selectV2Popper.scrollTop;
  const clientHeight=selectV2Popper.scrollHeight;
  const scrollHeight=selectV2Popper.scrollHeight;
  console.log(scrollHeight);
  if(clientHeight+scrollTop+10>=scrollHeight){
    //分页请求数据处理
    //getPageData(++currentPage,pageSize,keyWord);
    //....
  }
},

附上防抖函数

//防抖函数
export function debounce(fn,delay){
    let timer = null;
    return (...args)=>{
        clearTimeout(timer)
        timer=setTimeout(()=>{
            fn.apply(this,args);
            timer = null;
        },delay)
    }
}

通过上述处理，我们便可以通过监听scroll事件，动态(分页)加载数据