```javascript
  <!-- 下拉框觸底加載頁(yè)面 -->
  <template>
    <div class="m-4">
      <p>第一個(gè)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>第二個(gè)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: '沒(méi)有更多數(shù)據(jù)了...',
          type: "warning",
        });
      }
      const newOptions = res.data.map((item) => {
        return { value: item.name, label: item.index }
      })
      options.value.push(...newOptions)
    })
}
// 觸底了，繼續(xù)發(fā)請(qǐng)求
const loadmore = () => {
  pageData.pageIndex = pageData.pageIndex + 1
  getOptions()
}
</script>

// src/directives/loadmore/index.js
import { debounce } from "lodash";
export default {
  mounted(el, binding) {
    // 不插入body時(shí)，以下方式可獲取元素
    // 插入body時(shí)，需要以document.querySelector('.el-scrollbar__wrap')獲取
    let scrollWrap = el.querySelector('.el-scrollbar__wrap')
    // 把監(jiān)聽(tīng)的方法防抖一下
    const handle = debounce((e) => {
      let scrollDistance = scrollWrap.scrollHeight - scrollWrap.scrollTop
      // 比如此處預(yù)留10個(gè)像素的位置用于觸底
      if (scrollWrap.clientHeight + 10 > scrollDistance) {
        binding.value() // 觸底通知一下，外界
      }
    }, 170)
    // 綁定監(jiān)聽(tīng)滾動(dòng)事件
    scrollWrap?.addEventListener('scroll', handle)
    // 方法掛載到元素身上便于解綁時(shí)使用
    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"
// 自定義指令對(duì)象，用于遍歷注冊(cè)
const directives = {
    loadmore
}
// 批量注冊(cè)指令并暴露到main.js中去便于注冊(cè)
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>第一個(gè)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>第二個(gè)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: '沒(méi)有更多數(shù)據(jù)了...',
          type: "warning",
        });
      }
      const newOptions = res.data.map((item) => {
        return { value: item.name, label: item.index }
      })
      options.value.push(...newOptions)
    })
}
// 觸底了，繼續(xù)發(fā)請(qǐng)求
const loadmore = () => {
  pageData.pageIndex = pageData.pageIndex + 1
  getOptions()
}
</script>