这次给大家带来element-ui如何操作table滚动效果,element-ui操作table滚动的注意事项有哪些,下面就是实战案例,一起来看一下。
添加全局注册事件,用来监听滚动事件
window.vue.directive('loadmore', {
bind(el, binding) {
const selectwrap = el.queryselector('.el-tablebody-wrapper')
selectwrap.addeventlistener('scroll', function() {
let sign = 100
const scrolldistance = this.scrollheight - this.scrolltop - this.clientheight
if (scrolldistance <= sign) {
binding.value()
}
})
}
})
sign 用于标记位置
直接让scrolldistance === sign 并不能保证每次都会触发,所以用区间表示。后续会处理频繁触发问题。
添加事件
给需要无线加载的表格添加自定义事件,v-loadmore=”loadmore”。在methods中定义触发的事件
loadmore () {
if (this.loadsign) {
this.loadsign = false
this.page++
if (this.page > 10) {
return
}
settimeout(() => {
this.loadsign = true
}, 1000)
console.log('到底了', this.page)
}
}
this.loadsign 用于标记page是否继续递增
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
在vue中使用compass
集成ueditor富文本编辑器的方法
以上就是element-ui如何操作table滚动效果的详细内容。