在开发过程中，下拉框组件一般情况下均为后台返回的数据进行渲染，但是后台有上百条甚至更多数据时，会导致加载速度过慢，内容无法及时渲染的问题。这时就需要我们通过下拉刷新的方式来对Select选择器进行处理。其功能效果与分页查询接口一致。上代码：

1.首先在main.js文件中为Vue增加一个方法 (完整代码，直接复制粘贴即可)

Vue.directive('scroll-loadMore', {

bind(el, binding) {

const SELECTWRAP_DOM = el.querySelector(

'.el-select-dropdown .el-select-dropdown__wrap'

)

SELECTWRAP_DOM.addEventListener('scroll', function () {

const condition =

this.scrollHeight - this.scrollTop <= this.clientHeight

if (condition) {

binding.value()

}

})

}

})

2.在我们的Select选择器中绑定事件 v-scroll-loadMore="loadmore"

3.这时就可以去methods中定义此事件 事件会在下拉到底的时候触发

4.我本人是通过与watch搭配使用

(1).data中定义后端接口 页码的参数，默认为0 如：PageIndex: 0

(2).在watch监听PageIndex 当他发生变化时调用后台接口请求数据，同时它也是接口需要的页码参数

(3).在生命周期中随意调用一个函数，此函数只做一件事 使PageIndex变为1即可

(4).当PageIndex改变后watch会请求接口数据，参数为1，只会返回第一页的数据....目的初步达成

(5).Select选择器中自带@visible-change事件 参数为boolean值 鼠标点进选择框中为true,移出为false 此时需要进行判断 （为true时 this.PageIndex = 1） （为false时  this.PageIndex = 0 并将data中用来接收后端数据的数组重新清空

前端小郜编写，，，希望对大家有帮助 谢谢