el-select滚动底部加载更多-Vue3（ElementPlus版，亲测成功）

要在element的el-select组件中实现滚动加载更多，可以使用以下步骤： 1. 将el-select的popper-class属性设置为一个自定义类名，以便样式定制。 2. 在自定义类名的样式中，将popper的max-height设置为一个较小的值，以便在下拉列表中只显示部分选项。 3. 使用Vue的scroll事件监听器来检测下拉列表的滚动位置，并在滚动到底部时触发加载更多数据的函数。 4. 在触发加载更多数据的函数中，将新数据添加到原来的选项列表中，并更新下拉列表的高度以显示所有选项。 以下是一个简单的示例代码： HTML模板： ```html <el-select v-model="selected" popper-class="my-popper" @visible-change="handleVisibleChange"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> ``` JavaScript代码： ```js export default { data() { return { selected: &#39;&#39;, options: [], loading: false, page: 1, perPage: 10, } }, methods: { handleVisibleChange(visible) { if (visible && this.options.length === 0) { this.loadData() } }, loadData() { this.loading = true // 模拟异步加载数据 setTimeout(() => { const newOptions = [] for (let i = 0; i < this.perPage; i++) { const value = (this.page - 1) * this.perPage + i newOptions.push({ label: `Option ${value}`, value, }) } this.options = [...this.options, ...newOptions] this.page++ this.loading = false }, 1000) }, handleScroll(event) { const target = event.target const distance = target.scrollHeight - target.scrollTop - target.clientHeight if (distance < 10 && !this.loading) { this.loadData() } }, }, mounted() { this.$nextTick(() => { const popper = this.$refs.select.$refs.popper popper.addEventListener(&#39;scroll&#39;, this.handleScroll) }) }, beforeDestroy() { const popper = this.$refs.select.$refs.popper popper.removeEventListener(&#39;scroll&#39;, this.handleScroll) }, } ``` 在上面的代码中，handleVisibleChange方法用于在下拉列表显示时自动加载第一页数据，loadData方法用于异步加载更多数据，handleScroll方法用于监听下拉列表的滚动事件并在需要时触发加载更多数据的操作。在mounted钩子函数中，我们使用$refs获取下拉列表的popper元素，并添加scroll事件监听器。在beforeDestroy钩子函数中，我们移除scroll事件监听器以避免内存泄漏。