vue+elementui--下拉框中的数据量太大，可以进行懒加载处理_element ui下拉框选项如何懒加载

<el-form-item label="资源" prop="resourceId">
    <el-select
        v-model="form.resourceId"
        filterable
        placeholder="请选择"
        clearable
        :popper-append-to-body="false"
        v-el-select-loadmore="loadmore" // 这个是懒加载需要加的
        :filter-method="searchResource"
        @change="changeResourceId"
        style="width:100%" >
 
            <el-option
              v-for="item in workOption"
              :key="item.resourceId"
              :label="item.resourceName"
              :value="item.resourceId">
            </el-option>
    </el-select>
</el-form-item>

export default{
  name: "",  
  directives: {
    '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(){
      selectWorkParams: {
        pageNum: 1, // 设置当前页数
        pageSize: 200, // 设置一页显示多少条数据
        resourcesType: null, // 设置其他的查询条件
        resourceName: null // 设置其他的查询条件
      },
      resourceTotal: 0,
      selectResourceName: null,
      workOption:[],
  }

searchResource(val){
      this.selectResourceName = val;
      this.workOption = new Array();
      this.selectWorkParams.pageSize = 200;
      this.selectWorkParams.pageNum = 1;
      // 资源名称
      this.selectWorkParams.resourceName = val;
      // 资源类型
      this.selectWorkParams.resourcesType = this.form.resourcesType;
      getResourceTypeList(this.selectWorkParams).then(response => {
        this.resourceTotal = response.rows.length;
        if(this.workOption.length > 0){
          this.workOption = this.workOption.concat(response.rows);
        }else{
          this.workOption = response.rows;
        }
      });
    },
    loadmore(){
      if(this.resourceTotal === 200){
        this.selectWorkParams.pageNum++;
        this.searchLoadResource(this.selectResourceName);
      }
    },
    searchLoadResource(val){
      // 资源名称
      this.selectWorkParams.resourceName = val;
      // 资源类型
      this.selectWorkParams.resourcesType = this.form.resourcesType;
      getResourceTypeList(this.selectWorkParams).then(response => {
        this.resourceTotal = response.rows.length;
        if(this.workOption.length > 0){
          var pushFlg = '';
          // 这个循环是因为下拉框滚动条的时候，有时会揍两遍方法，导致数据重复添加
          // 循环中的判断是为了不让数据重复添加
          for(var i =0; i < this.workOption.length; i++){
            if(this.workOption.findIndex(item => item.resourceId === response.rows[i].resourceId) < 0){
              pushFlg = 'push';
              break;
            }
          }
          if(pushFlg === 'push'){
            this.workOption = this.workOption.concat(response.rows);
          }
        }else{
          this.workOption = response.rows;
        }
      });
    },