Vue3的el-select 选择器下拉滚动加载

### 实现 Vue3 `el-select` 下拉框滚动分页加载 为了实现在 Vue3 中使用 Element Plus 的 `el-select` 组件并实现下拉列表中的滚动分页加载，可以采用自定义指令的方式。这种方法能够有效地监听滚动事件，并在接近底部时触发数据加载。 #### 自定义指令注册 通过创建一个名为 `elSelectLoadmore` 的自定义指令来增强 `el-select` 功能[^2]： ```typescript // src/directives/elSelectLoadMore.ts import { DirectiveBinding } from 'vue'; const elSelectLoadmore = { mounted(el: HTMLElement, binding: DirectiveBinding) { const selectWrapper = el.querySelector('.el-select-dropdown .el-scrollbar__wrap'); if (selectWrapper) { selectWrapper.addEventListener('scroll', () => { const scrollTop = selectWrapper.scrollTop; const clientHeight = selectWrapper.clientHeight; const scrollHeight = selectWrapper.scrollHeight; // 当滚动条距离底部小于等于0时触发加载更多逻辑 if (scrollTop + clientHeight >= scrollHeight - 5 && !binding.value.loading) { binding.value.loadMore(); } }); } }, }; export default elSelectLoadmore; ``` 此代码片段展示了如何监听 `.el-select-dropdown .el-scrollbar__wrap` 元素上的滚动事件，并判断是否到达了容器的底部位置。一旦满足条件，则调用绑定对象内的 `loadMore()` 方法执行进一步的数据获取操作。 #### 使用自定义指令 接着，在应用初始化阶段全局注册该指令以便于后续组件内直接使用： ```typescript // main.ts or setup file import { createApp } from 'vue'; import App from './App.vue'; import elementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import directive from '@/directives'; // 假设这是存放所有自定义指令的地方 createApp(App).use(elementPlus).use(directive).mount('#app'); ``` 最后，在具体的页面或组件中利用这个新引入的功能完成实际业务需求： ```html <template> <div class="example"> <el-select v-model="value" placeholder="请选择..." style="width: 100%;"> <!-- 这里放置选项 --> <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-option> <!-- 如果正在加载则显示loading图标 --> <p v-if="loading">Loading...</p> <!-- 若无更多数据可加载提示 --> <p v-else-if="noMoreData">No more data</p> </el-select> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ name: "Example", directives: { 'select-load-more': require('@/directives/elSelectLoadMore').default, }, setup() { let value = ref(''); let loading = ref(false); let noMoreData = ref(false); function loadMore() { console.log("尝试加载更多..."); // 设置标志位防止重复请求 loading.value = true; setTimeout(() => { // 模拟异步接口返回新的option项 for(let i=0; i<10; ++i){ options.value.push({ label:`Option ${options.value.length}`, value: `${Math.random().toString(36).substr(-8)}`}); } // 更新状态 loading.value = false; // 判断是否有更多的数据可供加载 if(options.value.length>=totalOptionsCount){ noMoreData.value=true; } }, 1000); }; return { value, loading, noMoreData, options:ref([]), totalOptionsCount:100,// 总共可能有的选项数量 loadMore }; } }) </script> <style scoped> .example{ width: 300px; } </style> ``` 上述模板部分包含了两个额外的状态变量用于指示当前是否处于加载过程中 (`loading`) 和是否存在未加载完毕的数据 (`noMoreData`) 。当用户滚动至最下方时会自动触发 `loadMore()` 函数模拟网络请求追加新项目到现有列表之中直到达到预设的最大数目为止。