1、自定义指令(main.js)
Vue.directive("loadmore", {
bind(el, binding) {
// 获取element-ui定义好的scroll盒子
let select_dom = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");
select_dom.addEventListener("scroll", function () {
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
if (CONDITION) {
binding.value();
}
});
}}
);
2、demo设置
// el-select里加入loadmore
<el-select v-loadmore="loadmore"></el-select>
3、分页参数
pageData: {
current: 1, // 页码
size: 10 // 条数
},
total: 0
4、事件方法(methods)
loadmore(){
console.log('我滑动加载了');
// 请求后端数据并加入分页
......
}
网友评论