Vue|element select 下拉数据滚动分页且可搜索 javascript|vue.js|elementUI

由于下拉项过多，加载速度过慢，所以采用下拉加载方式，同时搜索改为后台搜索，其中remoteMethod就是后台搜索绑定的方法，后台搜索时输入框无法判断是搜索还是选中，所以使用multiple 并且:multiple-limit="1"

{{errors.first('project')}}

remoteMethod(query) { this.query = query; //如果搜索框是空的，就访问原始数据，否则从后台搜索 if (query !== '') { this.loading = true; setTimeout(() => { this.loading = false; this.searchData(query); }, 200); } else { //userList就是select绑定的可选数据 this.userList = this.userListInite; } },async searchData(query) { await.... //获得数据data，然后赋给userList this.userList = data; }, mounted() { // 规定下拉框每页显示15条，通过改变页码改变显示总数目。 //初始化第一页原始数据 this.loadUserList({ currentPage: 1 }); //给select下拉添加滚动监测 this.setLoadMore() }, // 用户列表下添加用户的用户下拉列表 async loadUserList(params) { const that = this; const { currentPage } = params; try { const { data } = await that.$。。。。( { currentPage: currentPage, pageSize: 15 }); if (data) { that.userListInite = that.userListInite.concat(data); that.userList = that.userListInite; } if (that.userListInite.length >= data.totalElements) { //已获取全部数据标志，当已获取全部数据时，不再访问接口拉取数据。 that.getAll = true; } } catch { console.log('bug'); } }, //给select框加滚动监测 setLoadMore() { const that = this; //获得元素 const loadSelectElement = document.getElementById('loadMoreSelect').getElementsByClassName('el-select-dropdown__wrap')[0]; function scrollLoadData() { // 当滚动条高度等于卷入高度+可视高度时，说明到达底部，scrollHeight :滚动条高度，scrollTop ：已卷入不可见的滚动条高度，clientHeight：可见的滚动条高度。 const scrollDistance = loadSelectElement.scrollHeight - loadSelectElement.scrollTop - loadSelectElement.clientHeight; // 非搜索 if (scrollDistance <= 0 && !that.query) { //页码依次加1 that.loadUserList({ currentPage: that.currentPage += 1 }); } } loadSelectElement.addEventListener('scroll', scrollLoadData,); //如果已加载完全部数据，取消监听 if (that.getAll) { loadSelectElement.removeEventListener('scroll', scrollLoadData); } },