elementUi - table实现滚动加载
vue+element-ui table实现滚动加载
自定义指令实现
第一步:在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()
}
})
}
})
注意:
scrollHeight:指元素的总高度,包含滚动条中的内容。只读属性。不带px单位。就是下图中,54条数据的高度,但是因为有滚动条,所以屏幕看不到这么高
scrollTop:当元素出现滚动条时,向下拖动滚动条,内容向上滚动的距离。可读可写属性。不带px单位。如果该元素没有滚动条,则scrollTop的值为0,该值只能是正值。就是下图中红色框的高度
clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小,实际上就是可视区域的大小。就是下图红色箭头的高度
scrollHeight-scrollTop-clientHeight=0,这个时候可以就是滚动条滚到底部的时候了。(如果表格有padding,margin值,需要减去)
第二步:在组件中,使用自定义的事件
v-loadmore=“loadMore”
在methods中调用loadMore
//表格滚动加载
tableloadMore () {
if (this.currentPage < this.totalPage) {//当前页数小于总页数就请求
this.currentPage++;//当前页数自增
this.$axios({
method:'get',
url:this.api+'admin/StockLevel',
params:{
enabled:this.value1,
page:this.page,
limit:this.limit
}
}).then(res=>{
this.build = res.data.data.arr
})
}else{
console.log('到底了', this.page)
}
}
example
导出
{{scope.row.calcState==='0'?'未对账':scope.row.calcState==='1'?'对账中':'已对账'}}
查看详情