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:

Using Compass in Vue

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!