使用组件加自定义指令实现下拉加载select和远程搜索select

原由

写这个指令主要是项目中有时候下拉框会有很多数据，一次性加载太多又太慢，影响性能。

然后我前前后后用了很多种方法，antd的组件有下拉的滚动事件，如果一开始给它默认数据的话，但是远程搜索又有问题，默认无数据的话倒是可以使用，后来我就放弃了用这个。

直接上正文

先在data的同级下创建一个自定义指令

  directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        SELECTWRAP_DOM.addEventListener('scroll', () => {
          /**
           * scrollHeight 获取元素内容高度(只读)
           * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
           * clientHeight 读取元素的可见高度(只读)
           * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          const condition = SELECTWRAP_DOM.scrollHeight - SELECTWRAP_DOM.scrollTop <= SELECTWRAP_DOM.clientHeight
          if (condition) {
            console.log('自定义指令触底');
            binding.value()
          }
        })
      },
    },
  },

           <el-select v-el-select-loadmore="loadmore" v-model="selectedOption" filterable remote reserve-keyword
                    placeholder="请选择场所类型" :remote-method="remoteMethod" :loading="isLoading">
                    <el-option v-for="item in displayedOptions" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>

在页面中使用

.其中  filterable是开启搜索 :remote-method="remoteMethod" 是搜索触发的事件 然后请求新的数据直接覆盖，上面的antd的组件覆盖不了数据，所以就没用了

     displayedOptions: [], // 用于显示的选项

      isLoading: false,     // 加载状态

      pageSize: 10,         // 每次加载的选项数量

      PageNo: 1,//当前页面

      selectedOption: ''

   loadOptions() {
      //加载数据
      const { eventType, eventBigType } = this.model
      getAction(this.url.getListAlarm, { pageSize: this.pageSize, pageNo: this.PageNo, eventBigType, eventType }).then(res => {
        console.log(res, 'res');
        this.displayedOptions = [...this.displayedOptions, ...res.result];
      })
    },
    remoteMethod(query) {
      console.log(query);
      if (query !== '') {
        this.isLoading = true;
        console.log(12311);
        const { eventType, eventBigType } = this.model
        getAction(this.url.getListAlarm, { eventBigType, eventType, keyWord: query }).then(res => {
          console.log(res, '搜索res');
          this.isLoading = false;
          this.displayedOptions = res.result
          console.log(this.displayedOptions);
          // this.displayedOptions=res.result.records
        })
      } else {
        this.PageNo = 1
        this.displayedOptions = []
        this.loadOptions()
      }
    },
    loadmore(val) {
      // console.log('事件22');
      this.PageNo++
      this.loadOptions()
    },

 可以自己在下拉触底的事件里面加逻辑判断