vue3 element-plus el-autocomplete 下拉滑动加载更多

1.0  引入下拉组件

 <el-autocomplete
              ref="autocomplete"
              :popper-append-to-body="false"
              v-model="keywordsUid"
              :fetch-suggestions="querySearch"
              placeholder="请输入产品代码"
              @select="handleSelect"
              clearable
              size="small"
            ></el-autocomplete>

2.0 在methods 里面写加载下拉的方法

async load() {
      console.log(56565);
      this.page++;
      let list = await this.search(this.keywords);

      console.log(this.$refs["autocomplete"].suggestions);
      this.$refs["autocomplete"].suggestions.push(...list);
    },

3.0需要借助与vue3 的directives 局部使用

  directives: {
    loadmore: {
      beforeMount(el, binding) {
        // 此处为了简单，直接判断触底了
        function handleScroll(e) {
          let isBottom =
            e.target.clientHeight + e.target.scrollTop == e.target.scrollHeight;
          if (isBottom) {
            binding.value();  // 这个就是调用了load 的方法
          }
        }
        // 监听滚动
        let wrapDom = el.querySelector(".el-autocomplete-suggestion__wrap");
        el.__handleScroll__ = handleScroll;
        el.__wrapDom__ = wrapDom;
        wrapDom.addEventListener("scroll", handleScroll, false);
      },
      unbind(el, binding, vnode) {
        // 解除事件监听
        el.__wrapDom__.removeEventListener(
          "scroll",
          el.__handleScroll__,
          false
        );
      },
    },
  },

注意directives 的使用是和methods 等声明周期平级的