vue el-select下拉框，远程搜索+滚动触底加载

一、标签部分

1、:remote-method=“remoteMethod” 远程搜索；
2、v-el-select-loadmore=“that” 封装的触底监听指令，that传给指令的this；
3、“isLoad ? ‘selectLoad’ : ‘selectSucc’” 提示有数据还是已经加载完了

<el-select
  v-model="projectForm.itemname"
  style="width: 100%"
  filterable
  remote
  clearable
  reserve-keyword
  placeholder="请选择项目名称"
  :remote-method="remoteMethod"
  v-el-select-loadmore="that"
  :itemLoading="itemLoading"
>
	//显示数据后面的加载.../没有更多
  <div :class="isLoad ? 'selectLoad' : 'selectSucc'">
    <el-option
      v-for="(item, index) in informationOptions"
      :key="index"
      :label="item.itemName"
      :value="item.itemCode"
    >
    </el-option>
  </div>
</el-select>

data() {
  return {
    // 用于滚动刷新
    that: this,
    // 防止触底连续访问接口
    isSuccess: true,
    // 判断是否还有数据
    isLoad: true,
  };
 }

二、、js部分

directives: {
  /** 下拉框懒加载 */
  "el-select-loadmore": {
    bind(el, binding) {
      // 获取element-ui定义好的scroll盒子
      const scrollDom = el.querySelector(".el-select-dropdown__wrap");
      if (!scrollDom) {
        return false;
      }
      scrollDom.addEventListener("scroll", function (event) {
        const target = event.target;
        // 防止触发两次事件
        if (!binding.value.isLoad) {
          return false;
        }
        if (
          target.scrollTop + target.clientHeight >= target.scrollHeight - 4 &&
          binding.value.isSuccess
        ) {
          binding.value.isSuccess = false;
          // 滚动条已经滚动到底部,就要开始调接口，加载下一页的数据
          binding.value.params.pageNum++;
          itemList(binding.value.params).then((res) => {
            binding.value.informationOptions = [
              ...binding.value.informationOptions,
              ...res.rows,
            ];
            binding.value.isSuccess = true;
            if (res.rows.length < 25) {
              binding.value.isLoad = false;
            }
          });
        }
      });
    },
  },
},

methods: {
  // 远程搜索获取项目信息
  remoteMethod(query) {
    this.params.itemName = query;
    if (query !== "") {
      this.itemLoading = true;
      this.getItemList();
    } else {
      this.informationOptions = [];
    }
  },
}

三、css部分

控制加载中/没有更多样式

.selectLoad:after {
  position: relative;
  z-index: 1000;
  content: "加载中...";
  display: inline-block;
  text-align: center;
  color: #979797;
  width: 100%;
  line-height: 30px;
  overflow: hidden;
  font-size: 13px;
}
.selectSucc:after {
  position: relative;
  z-index: 1000;
  content: "没有更多";
  color: #979797;
  display: inline-block;
  text-align: center;
  width: 100%;
  line-height: 30px;
  overflow: hidden;
  font-size: 13px;
}