自定义滑动到底部触发指令，elementUI实现分页下拉框

在使用Element UI时，可以利用el-select组件结合infinite-scroll指令来实现分页下拉框。以下是一个简单的示例：

1. 首先，你需要定义一个infinite-scroll指令，它会监听滚动事件并在滑动到底部时触发一个方法。

Vue.directive('infinite-scroll', {
  inserted(el, binding) {
    const handler = () => {
      if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
        binding.value();
      }
    };
 
    el.addEventListener('scroll', handler);
  },
  unbind(el) {
    el.removeEventListener('scroll', el.infiniteScrollHandler);
  }
});

2. 在你的组件中，你可以这样使用el-select和infinite-scroll指令：

<template>
  <el-select
    v-model="selectedValue"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="isLoading"
    infinite-scroll-distance="10"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: null,
      options: [],
      currentPage: 1,
      isLoading: false,
    };
  },
  methods: {
    fetchOptions(page) {
      // 模拟异步获取数据
      this.isLoading = true;
      setTimeout(() => {
        const moreOptions = Array.from({ length: 10 }, (_, i) => ({
          label: `Option ${page * 10 + i}`,
          value: `value${page * 10 + i}`,
        }));
        this.options = [...this.options, ...moreOptions];
        this.isLoading = false;
        this.currentPage = page;
      }, 1000);
    },
    loadMore() {
      if (!this.isLoading) {
        this.fetchOptions(this.currentPage + 1);
      }
    },
  },
  mounted() {
    this.fetchOptions(this.currentPage);
  },
};
</script>

在这个示例中，当下拉框滑动到底部时，loadMore方法会被触发，从而加载更多的选项。infinite-scroll-disabled属性用于控制是否停止触发加载，而infinite-scroll-distance属性用于设置当滚动距离底部多远时触发加载。这里的fetchOptions方法模拟了异步获取数据的过程，并在获取数据后更新options数组，从而在下拉框中显示新的选项。