el-select选项分页

### Element UI `el-select` 组件分页实现 为了实现在 Vue2 和 Element UI 中的 `el-select` 组件上应用远程搜索并带有分页懒加载的功能，可以采用自定义指令的方式监听滚动事件来触发数据加载。下面是一个具体的实现方式： #### 自定义指令用于监控滚动到底部 通过创建一个名为 `select-loadmore` 的全局指令，在下拉框显示区域接近底部时自动调用绑定的方法。 ```javascript // 定义自定义指令 select-loadmore Vue.directive('select-loadmore', { inserted(el, binding, vnode) { const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap'); SELECTWRAP_DOM.addEventListener('scroll', function () { // 判断是否滑动到了最底部 const condition = Math.floor(this.scrollHeight - this.scrollTop) <= this.clientHeight; if (condition && typeof binding.value === 'function') { binding.value(); } }); }, }); ``` 此部分代码实现了当用户滚动到 `.el-select-dropdown__wrap` 元素内部视图区域能见范围内的最后一屏时，则会执行传入给该指令作为参数的函数[^1]。 #### 使用场景中的组件实例化 接下来是在实际项目里边怎样去运用这个自定义指令以及配合其他逻辑完成整个需求的例子: ```vue <template> <div class="example"> <!-- 下拉选择器 --> <el-select v-model="selectedValue" placeholder="请选择..." @visible-change="handleVisibleChange" v-select-loadmore="loadMoreOptions"> <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-option> </el-select> <!-- 加载状态提示 --> <p v-if="loading">正在加载更多选项...</p> </div> </template> <script> export default { data() { return { selectedValue: '', loading: false, currentPage: 1, totalPage: 0, options: [] }; }, methods: { handleVisibleChange(visible) { if (!this.loading && visible && this.currentPage === 1) { this.fetchData(true); } }, fetchData(isFirstTime = false) { this.loading = true; setTimeout(() => { let newItems = []; for (let i = 0; i < 10; ++i) { newItems.push({ value: `${this.currentPage}-${i}`, label: `Item ${this.currentPage}-${i}` }); } if (isFirstTime || this.options.length % 10 === 0) { this.totalPage++; this.options = isFirstTime ? newItems : [...this.options, ...newItems]; } this.loading = false; }, 500); // 模拟网络请求延迟时间 }, loadMoreOptions() { if (this.currentPage >= this.totalPage) return; this.currentPage += 1; this.fetchData(); } } }; </script> ``` 上述模板展示了如何利用之前提到过的自定义指令 `v-select-loadmore` 来处理分页加载的情况，并且还包含了模拟异步获取新一批次的数据的过程。每当页面可见变化或是达到列表末端都会尝试发起新的查询请求直到所有可用项都被展示出来为止。

el-select是一个基于Element UI库的下拉选择组件。它提供了分页功能，可以实现通过下拉框的方式加载更多选项。通过引用和引用中的代码片段，可以看出el-select组件的使用方法。 首先，需要导入el-select组件的相关文件，可以通过以下代码引入： import selectPage from '@/views/components/component/selectPage.vue'; 然后，在el-select组件的代码中添加分页相关的属性和事件处理函数。例如，可以使用`v-model`来绑定选中的值，并使用`filterable`和`clearable`属性来实现可搜索和可清空的功能，如下所示： <el-select v-model="selectVal" filterable clearable> [2] 为了实现下拉分页，还需要在分页事件中调用相应的方法。例如，在`currentChange`事件中，可以根据当前页码获取对应的数据并更新表格，然后手动取消所有行的选中状态，并再次调用选中方法，如下所示： // 分页-当前页 async currentChange(val) { this.objTable.pagination.pageNo = val; await this.getObjTable(); this.objTable.tableData.forEach((row) => { this.$refs.objIdTable.$children.toggleRowSelection(row, false); }); this.toggleSelection(); } 同样地，在`sizeChange`事件中，可以根据每页数量改变来获取对应的数据并更新表格，然后手动取消所有行的选中状态，并再次调用选中方法，如下所示： // 分页-每页数量改变 async sizeChange(val) { this.objTable.pagination.pageSize = val; await this.getObjTable(); this.objTable.tableData.forEach((row) => { this.$refs.objIdTable.$children.toggleRowSelection(row, false); }); this.toggleSelection(); } 通过以上代码，可以实现el-select下拉分页的功能。用户可以通过下拉框选择不同的页码或每页数量，然后相应的数据会被加载和更新到表格中，并且在分页的同时会手动取消所有行的选中状态。