el-select 下拉加载更多

### 实现 el-select 下拉框分页加载更多功能 在 Vue 和 Element-UI 中，可以通过自定义指令监听下拉框的滚动事件来实现分页加载更多功能。以下是具体的实现方法[^1]。 #### 自定义指令 首先需要创建一个自定义指令文件（如 `selectScroll.js`），用于监听 `.el-select-dropdown__wrap` 的滚动事件，并在滚动到底部时触发加载更多操作。 ```javascript // selectScroll.js import Vue from 'vue'; export default () => { Vue.directive('selectScroll', { bind(el, binding) { const className = '.' + binding.arg; el.className = binding.arg; // 获取滚动页面 DOM const SCROLL_DOM = el.querySelector(`${className} .el-select-dropdown .el-select-dropdown__wrap`); SCROLL_DOM.addEventListener('scroll', function () { const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight; if (CONDITION) { binding.value(); // 触发绑定的回调函数 } }); }, }); }; ``` 在组件中引入该指令并使用： ```javascript // 引入自定义指令 import selectScrollDirective from './selectScroll'; selectScrollDirective(); ``` #### 组件实现 在组件中使用 `v-selectScroll` 指令，并传入回调函数以加载更多数据。 ```vue <template> <el-select v-model="selectedValue" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="loadOptions" v-selectScroll="'custom-class'" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </template> <script> export default { data() { return { selectedValue: '', options: [], allOptions: [], // 存储所有选项 pageSize: 10, // 每页加载数量 currentPage: 1, // 当前页码 }; }, methods: { loadOptions(query) { if (query !== '') { this.currentPage = 1; // 重置页码 this.options = []; // 清空当前选项 this.searchOptions(query); // 根据查询条件加载数据 } }, searchOptions(query) { // 模拟异步请求 setTimeout(() => { const start = (this.currentPage - 1) * this.pageSize; const end = this.currentPage * this.pageSize; // 假设 allOptions 是从后端获取的所有匹配项 this.allOptions = Array.from({ length: 100 }, (_, i) => ({ value: `${query}-${i}`, label: `${query}-${i}`, })); const pageOptions = this.allOptions.slice(start, end); this.options = [...this.options, ...pageOptions]; if (pageOptions.length > 0) { this.currentPage += 1; // 加载下一页 } }, 500); }, loadMore() { if (this.options.length < this.allOptions.length) { this.searchOptions(this.selectedValue); } }, }, }; </script> ``` 在上述代码中，`v-selectScroll` 指令绑定了 `loadMore` 方法，在滚动到底部时会自动加载更多数据[^2]。 #### 处理无法匹配值的情况 如果下拉框的选项无法与 `value` 值匹配，可以参考以下优化方案[^3]： ```javascript update(row) { this.formData = { ...row }; const selectId = this.formData.selectId; const index = this.optionList.findIndex((i) => selectId === i.id); if (index < 0) { this.formData.selectId = null; // 如果未找到匹配项，则清空值 } } ``` 通过上述方法，可以确保在选项列表更新后，下拉框能够正确显示值。 --- ###