ElementPlus 中el-select自定义指令实现触底加载请求options数据的方法

```javascript
  <!-- 下拉框触底加载页面 -->
  <template>
    <div class="m-4">
      <p>第一个select</p>
      <el-select v-model="value" v-loadmore="loadmore" :teleported="false" style="width:240px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <p>第二个select</p>
      <el-select v-model="value" v-loadmore="loadmore" :teleported="false" style="width:240px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
  </template>
<script setup>
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue'
const list = ref([])
const options = ref([])
const option = ref([])
const value = ref([])
const loading = ref(false)
let pageData = reactive({
  pageIndex: 1,
  pageSize: 10
})
onMounted(() => {
  getOptions()
})
const getOptions = () => {
  axios.get(`http://localhost:9999/getSelectOptions?pageIndex=${pageData.pageIndex}&pageSize=${pageData.pageSize}`)
    .then(res => {
      console.log(res.data);
      if (res.data.length < 1) {
        ElMessage({
          message: '没有更多数据了...',
          type: "warning",
        });
      }
      const newOptions = res.data.map((item) => {
        return { value: item.name, label: item.index }
      })
      options.value.push(...newOptions)
    })
}
// 触底了，继续发请求
const loadmore = () => {
  pageData.pageIndex = pageData.pageIndex + 1
  getOptions()
}
</script>

// src/directives/loadmore/index.js
import { debounce } from "lodash";
export default {
  mounted(el, binding) {
    // 不插入body时，以下方式可获取元素
    // 插入body时，需要以document.querySelector('.el-scrollbar__wrap')获取
    let scrollWrap = el.querySelector('.el-scrollbar__wrap')
    // 把监听的方法防抖一下
    const handle = debounce((e) => {
      let scrollDistance = scrollWrap.scrollHeight - scrollWrap.scrollTop
      // 比如此处预留10个像素的位置用于触底
      if (scrollWrap.clientHeight + 10 > scrollDistance) {
        binding.value() // 触底通知一下，外界
      }
    }, 170)
    // 绑定监听滚动事件
    scrollWrap?.addEventListener('scroll', handle)
    // 方法挂载到元素身上便于解绑时使用
    el._hanlde = handle
  },
  unmounted(el, binding) {
    let scrollWrap = document.querySelector('.el-scrollbar__wrap')
    scrollWrap?.removeEventListener('scroll', el._hanlde)
    el._hanlde = null
  }
}

// directives/index.js
import loadmore from "./loadmore"
// 自定义指令对象，用于遍历注册
const directives = {
    loadmore
}
// 批量注册指令并暴露到main.js中去便于注册
export default {
  install(app) {
    Object.keys(directives).forEach((key) => {
      app.directive(key, directives[key])
    })
  }
}

// main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 引入并使用自定义指令
import directive from './directives'
app.use(directive);
app.mount('#app');

// src/views/num/six.vue
  <!-- 下拉框触底加载自定义指令 -->
  <template>
    <div class="m-4">
      <p>第一个select</p>
      <el-select v-model="value" v-loadmore="loadmore" :teleported="false" style="width:240px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <p>第二个select</p>
      <el-select v-model="value" v-loadmore="loadmore" :teleported="false" style="width:240px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
  </template>
<script setup>
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue'
const list = ref([])
const options = ref([])
const option = ref([])
const value = ref([])
const loading = ref(false)
let pageData = reactive({
  pageIndex: 1,
  pageSize: 10
})
onMounted(() => {
  getOptions()
})
const getOptions = () => {
  axios.get(`http://localhost:9999/getSelectOptions?pageIndex=${pageData.pageIndex}&pageSize=${pageData.pageSize}`)
    .then(res => {
      console.log(res.data);
      if (res.data.length < 1) {
        ElMessage({
          message: '没有更多数据了...',
          type: "warning",
        });
      }
      const newOptions = res.data.map((item) => {
        return { value: item.name, label: item.index }
      })
      options.value.push(...newOptions)
    })
}
// 触底了，继续发请求
const loadmore = () => {
  pageData.pageIndex = pageData.pageIndex + 1
  getOptions()
}
</script>