element的select框实现懒加载数据

element模糊搜索下拉框数据太多，和后端协商做成懒加载模式

自定义指令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
                }
            })
        }
     }
}