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

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('我滑动加载了');
     // 请求后端数据并加入分页
     ......
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容