vue select 下拉加载更多（懒加载）

为避免后端一次给过多数据，导致页面卡顿，select选项可以进行分页，然后下拉加载更多.

项目中使用的elementUI, 先自定义指令，在main.js中添加：

v-scroll-loadMore="loadmore"

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()
}
})
}
})

然后select组件加入自定义指令： v-scroll-loadMore="loadmore"

<el-select v-model="Form.Name"
placeholder="类别"
@change="choseName"
filterable
:filter-method="NameFilter"
v-scroll-loadMore="loadmore">
<el-option v-for="item in List" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>

注意指令前有：‘v-’

加载方法 loadmore， 就需要自己去methods里定义了，如果要加筛选的话就定义filter-method，要注意节流，避免接口调用频繁

最后

以上就是自觉老师为你收集整理的vue select 下拉加载更多（懒加载）的全部内容，希望文章能够帮你解决vue select 下拉加载更多（懒加载）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。