Home > Article > Web Front-end > How to scroll the table table in element-ui
This time I will show you how to scroll the tabletable in element-ui, and what are the notes for rolling the table table in element-ui, The following is a practical case, let’s take a look.
Add global registrationEvent, used to monitor scrolling events
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 is used to mark the location
Directly letting scrollDistance === sign does not guarantee that it will be triggered every time, so it is represented by an interval. The issue of frequent triggering will be dealt with later.
Add event
Add custom events to tables that need to be loaded wirelessly, v-loadmore="loadMore". Define triggered events in 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 is used to mark whether the page will continue to increase
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
How to use Vue’s carousel component
The above is the detailed content of How to scroll the table table in element-ui. For more information, please follow other related articles on the PHP Chinese website!