//1.在main.js里注册
Vue.directive('loadmore', {
bind(el, binding) {
const selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function() {
let sign = 0
const scrolldistance = this.scrollHeight - this.scrollTop - this.clientHeight
if (scrolldistance <= sign) {
binding.value()
}
})
}
})
//2.在el-table组件中,使用自定义的事件:v-loadmore=“loadMore”
//3.在methods中调用loadMore
loadMore() {
if(this.aq == false){//是否已经全部加载
return
}
if(this.page == 1){//首次加载页码加一
this.page++
}
this.$axios({
method:'get',
url:数据接口地址,
params:{
page:this.page,
limit:this.limit
}
}).then(res=>{
if(res.data.length > 0){//有数据
this.page++ //页码加一,下次查询
res.data.forEach(res => {
this.tableData.push(res)//push到表格数据集合
});
}else{
this.aq = false //没有数据了
}
})
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。