美文网首页
el-select滚动到底部加载更多(分页加载数据)

el-select滚动到底部加载更多(分页加载数据)

作者: xsmile21 | 来源:发表于2022-12-06 17:28 被阅读0次

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('我滑动加载了');
     // 请求后端数据并加入分页
     ......
}

相关文章