vue+elementui实现table懒加载
实现原理: 判断表格滚动条是否滚动到底部
scrollHeight: 元素的⾼度即表格内容的⾼度
scrollTop: 元素滚动出去的⾼度
clientHeight: 元素可视区域的⾼度
当scrollTop + clientHeight = scrollHeight 时，滚动条滚动到底部
⾃定义指令-----可以写在main.js中，或者单独写js⽂件再使⽤Vue.use('⽂件名')注册
Vue.directive('loadmore',{
bind(el, binding){
jquery滚动条滚动到底部let loadmore = binding.value.loadmore,// 列表请求接⼝
callback = binding.value.callback,// 处理响应数据
selectWarp = el.querySelector('.el-table__body-wrapper')
// 监听滚动事件
selectWarp.addEventListener('scroll',function(){
let sign =0
const scrollDistance =this.scrollHeight -this.scrollTop -this.cilentHeight
if(scrollDistance <= sign){
// 滚动条到底部
loadmore(callback)// 请求接⼝并传⼊回调函数
}
})
}
})
list.vue — 需要表格懒加载的页
<template>
<div>
<!-- 回调函数名称必须为callback，使⽤别的⽅法名，需要像如下格式书写 -->
<el-table max-height="550":data="dataList"v-loadmore="{loadmore,calllback: viewData}"> </el-table>
</div>
</template>
<script>
export default{
data(){
dataList:[],
isLastPage:false,
page:1,
limit:10
},
menthods:{
loadmore(callback){
if(this.isLastPage)return
if(this.page ==1)this.page++
this.axios({
method:'get',
url:'xxxxxxxxxx',
params:{
page:this.page,
limit:this.limit
}
}).thne(res =>{
if(res.success){
sult.list.length >0){
if(this.page < sult.pages)this.page++
else this.isLastPage =true
this.dataList push({...item})
})
}else this.isLastPage =true
callback &&callback(this.dataList)
}else this.$(ssage)
})
}
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。