创建自定义指令,命名为loadmore
directives: {
loadmore: {
bind(el, binding) {
const selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function() {
let sign = 200;
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
if( this.scrollHeight == this.clientHeight ) return //没有滚动条
if ( scrollDistance <= sign) {
binding.value()
}
})
}
}
},
在要滚动的区域绑定指令
声明一个布尔值,默认为true,即表示可以滚动加载,滚动加载暂时关闭防止多次滚动一起请求数据,如果当前页加1后大于总页数或者当前数据只有一页,提示已经加载完毕并返回,否则的话,设置一个定时器,调用list,并再次允许滚动
loadMore() {
if (this.busy) {
this.busy = false;
this.currentPage++;
if(this.currentPage > this.totalPage || this.totalPage == 0){
this.$message.warning('已经到底了~')
return
}
setTimeout(() => {
this.getList()
this.busy = true
}, 100)
}
}
调用list的时候,由于一次性只请求固定条数的数据,相当于是分页模式但是把最新请求的数据追加到表格中,所以要给table绑定的data重新赋值,然后渲染showList就可以了
this.showList = this.showList.concat(res.varList)
网友评论