vue ElementUI ：InfiniteScroll 无限滚动问题

当时的问题是鼠标动了就会触发加载事件，并没有滚动到底部才触发。（因为高度不对，el-option是单条高度，我需要获取的是接口返回的数据的总高度）  

<template>
  <!-- el-select远程搜索 + 无限滚动加载下一页 -->
  <el-select
    v-model="value1"
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading"
    :popper-append-to-body="false"
  >
    <!-- 要知道for循环用在哪  el-option 单条高度 -->
    <div v-infinite-scroll="load" :infinite-scroll-disabled="busy">
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item.data[0].name"
        :value="item.data[0].name"
      >
      </el-option>
    </div>
    <p v-if="loadMore">加载中</p>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      value1: "",
      list: [],
      loading: false,
      states: [],
      pageNum: 10,
      busy: false,
      immediate: false,
      loadMore: false,
    };
  },
  mounted() {},
  methods: {
    remoteMethod(query) {
      // 解决重新输入内容滚动条无法回到顶部问题
      document.getElementsByClassName(
        "el-select-dropdown__wrap"
      )[0].scrollTop = 0;
      document.getElementsByClassName(
        "el-scrollbar__thumb"
      )[1].style.transform = "translateY(0)";

      this.value1 = query;
      console.log(this.value1);
      this.getData();
    },
    async getData() {
      console.log(111);
      await this.$http
        .get(
          `https://api.wmdb.tv/api/v1/top?type=Imdb&skip=0&limit=${this.pageNum}&lang=Cn`
        )
        .then((res) => {
          console.log(res.data);
          this.options.push(...res.data);
          this.pageNum += 10;
          this.loadMore = true;
          this.busy = false;
        });
    },
    load() {
      if (this.busy) return; // 防止一次请求多条数据
      this.busy = true;
      console.log(1);
      console.log(this.pageNum);
      this.getData();
    },
  },
};
</script>