Home > Article > Web Front-end > How element-ui operates table scrolling effect
This time I will show you how element-ui operates the table scrolling effect. What are the precautions for element-ui to operate table scrolling. 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 position
directly Letting scrollDistance === sign does not guarantee that it will be triggered every time, so it is expressed as an interval. The issue of frequent triggering will be dealt with later.
Add event
Add a custom event to the table that needs to be loaded wirelessly, v-loadmore= "loadMore". Define the triggered event 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 continues 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 php Chinese websites related articles!
Recommended reading:
How to integrate UEditor rich text editor
The above is the detailed content of How element-ui operates table scrolling effect. For more information, please follow other related articles on the PHP Chinese website!