(scrollHeight - clientHeight - scrollTop));if(scrollBottom =20){this.page++;if(this.hasMore) {this.requestData(this.keyword， 版本：vue.js elementui2.15.6 实现效果：滑动下拉菜单时，'，// 搜索handleSearch(query) {this.keyword = querythis.requestData(query， false)}else{message({ message: `数据已加载完毕`， methods: {// 加载数据async requestData(queryValue，// 分页参数page: 1， data() {return {selectedValue: ''，scrollTop，this.selectedValue);}，否则同时有多个下拉展示时不知道数据那个下拉。

error);} finally {this.loading = false;this.loadingMore = false;}}，resetPage = true) {if (resetPage) {this.page = 1;this.hasMore = true;this.loading = true;} else {this.loadingMore = true;}try {const params = {pageNo: this.page，事件触发时发送请求 html 复制代码 template div id=SelectSearchPage class=infinite-scroll-selectspan功能名称或需求列表：/span!--popper-class定义下拉框class，距离底部距离:'，options: []，loading: false， type: 'success'，scrollHeight，'。

event);const domTarget =event.targetconst scrollTop = domTarget.scrollTopconst clientHeight =domTarget.clientHeightconst scrollHeight = domTarget.scrollHeightconst scrollBottom = scrollHeight - clientHeight - scrollTop;console.log('scrollTop: '，this.scrollEvent);}dom.addEventListener(scroll，total: 0，this.scrollEvent) }， mounted() {this.requestData(''，change(){this.$emit(change，clientHeight。

hasMore: true，scrollHeight:'。

scrollEvent(event){// console.log('滑动事件被触发。

scrollListener: null}; }，方便获取div--el-select v-model=selectedValue placeholder=请选择 filterable remote :loading=loading clearable style=width: 300px; ref=mySelect@visible-change=handleVisibleChange@change=change:remote-method=handleSearchpopper-class=select-search-page-dropdown-popperel-option v-for=item in options :key=item.id :label=item.name :value=item.id //el-select /div/template 注意：popper-class=select-search-page-dropdown-popper定义下拉框class， ...data.records];}this.total = data.total;this.hasMore = this.page * this.pageSize data.total;}} catch (error) {console.error('加载失败:'，keyword: ''。

name: queryValue};const response = await findNameList(params);if(response.code===200){const data = response.dataif (resetPage) {this.options = data.records;} else {this.options = [...this.options，自动请求数据库数据 核心思路：对下拉菜单div的scroll事件进行监听。

}} ，loadingMore: false， props: { }，。

handleVisibleChange(visible){// const selectSearchPage = document.getElementById(SelectSearchPage);const dom = document.querySelector(.select-search-page-dropdown-popper).querySelector(.el-scrollbar).querySelector(.el-scrollbar__wrap)if(!visible){dom.removeEventListener(scroll，pageSize: 10，'。

'。

clientHeight:'。

pageSize: this.pageSize，方便取DIV，true) }， })}}}，true);}。

javascript 复制代码 import message from 'element-ui/packages/message'export default { name: 'SelectSearchPage'。