vue+element-ui|vue+element-ui table实现滚动加载
首先在main.js文件注册全局事件，代码如下：
Vue.directive('loadmore', {
bind(el, binding) {
var p = 0;
var t = 0;
var down = true;
var selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function() {
//判断是否向下滚动
p = this.scrollTop;
// if ( t < p){down=true}else{down=false}
if(t < p){
down = true;
}else{
down = false;
}
t = p;
//判断是否到底
const sign = 10;
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
【vue+element-ui|vue+element-ui table实现滚动加载】if (scrollDistance <= sign && down) {
binding.value()
}
})
}
})
在组件中，使用自定义的事件：
v-loadmore="loadMore"
在methods中调用loadMore
这样就实现啦！！！
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- tableView|tableView 头视图下拉放大 重写
- 人脸识别|【人脸识别系列】| 实现自动化妆