el-select下拉框处理分页数据,触底加载更多
1、声明自定义指令2、使用自定义指令v-loadmore3、发送请求加载数据
·
1、声明自定义指令:
directives: {
'loadmore': {
inserted(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、使用自定义指令v-loadmore:
<el-select filterable v-model="form.standardDevice" placeholder="请选择" clearable v-loadmore="loadMore" @change="handleChange">
<el-option v-for="item in deviceList" :key="item.deviceId" :label="item.deviceName" :value="item.serialNumber"></el-option>
<el-option v-if="selectLoading" v-loading="selectLoading" value=""></el-option>
</el-select>
3、发送请求加载数据
//滚动条滚动到底部
loadMore(){
//页数加一
this.pageNum ++
//发送网络请求
this.getDeviceList()
},
参考:el-select滚动到底部加载更多(分页加载数据)_el-select 触底加载分页_天道酬勤_鹿的博客-CSDN博客

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
所有评论(0)