Element's select box realizes lazy loading of data

There is too much data in the element fuzzy search drop-down box, and it negotiates with the back-end to create a lazy loading mode

Custom instruction el-select-loadmore

v-el-select-loadmore=“handleLoadMore”

<el-select popper-class="matterNameClass" v-model="matterName" placeholder="请输入名称关键字" style="width: 100%" @change="selectMatter" v-el-select-loadmore="handleLoadMore" filterable remote :remote-method="remoteMethod" :loading="loading">
<el-option v-for="item in matterOptions" :key="item.id+item.qlInnerCode" :value="item.qlInnerCode" :label="item.matterOrgName?item.matterOrgName +\'--\'+item.matterName:item.matterName"></el-option>
</el-select>

directives: {
    
    
      'el-select-loadmore': {
    
    
          bind(el, binding) {
    
    
              // 获取element-ui定义好的scroll盒子
              const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown.matterNameClass .el-select-dropdown__wrap');
              SELECTWRAP_DOM.addEventListener('scroll', function () {
    
    
                  const condition = this.scrollHeight - this.scrollTop <= this.clientHeight+20;
                  if (condition) {
    
    
                      binding.value();
                      //调用handleLoadMore
                  }
              });
          }
      }
},
methods: {
    
    
	//分页加载更多
      handleLoadMore(){
    
    
     	if(this.moreMatter){
    
    
     		get(this.widget.options.remoteUrl,Object.assign({
    
    matterName:this.matterName,page:this.loadPage,limit:20},JSON.parse(this.widget.options.remoteData)),this).then((res)=>{
    
    
                this.loadPage++
                this.matterOptions = [...res.data.data,...this.matterOptions]
                if(res.data.total){
    
    
                  this.moreMatter = true
                }else{
    
    
                  this.moreMatter = false
                }
            })
        }
     }
}