vue3 element-plus 下拉框的无限滚动

有时候select的选项太多，一下显示出来不太优雅，此时需要做个分页，下拉的时候获取更多数据。

本来是打算用element-plus的v-infinite-scroll无限滚动指令来做，但是发现不行，绑定不到选择框元素上，此时就需要自己写一个自定义指令来实现了。见下方代码：

此处用的是组件内自定义指令，setup语法糖中定义更加方便，直接写就行，但要注意需以v开头

// 自定义指令 下拉加载更多
const vLoadMore = {
  mounted(el, binding) {
    const dom = document.querySelectorAll(
      ".el-select-dropdown__wrap.el-scrollbar__wrap.el-scrollbar__wrap--hidden-default"
    );
    //由于是就一个地方用且我知道是哪个元素就直接通过索引来拿到该元素了
    dom[1].addEventListener("scroll", (e) => {
      if (e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight) {
        filter.size += 10;
        //调用绑定的方法
        binding.value();
      }
    });
  },
};

然后在html中使用即可

<el-select
      v-model="form.project_id"
      placeholder="请选择"
      filterable
      v-loadMore="getProject"
      >
        <el-option
          v-for="item in project"
          :key="item.uid"
          :label="item.name"
          :value="item.uid"
        />
 </el-select>