vue select 下拉加载更多(懒加载)
为避免后端一次给过多数据,导致页面卡顿,select选项可以进行分页,然后下拉加载更多.项目中使用的elementUI, 先自定义指令,在main.js中添加:v-scroll-loadMore="loadmore"Vue.directive('scroll-loadMore', {bind(el, binding) {const SELECTWRAP_DOM = el.querySelector
·
为避免后端一次给过多数据,导致页面卡顿,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,要注意节流,避免接口调用频繁
更多推荐
已为社区贡献5条内容
所有评论(0)