About how element-ui in vue implements the rolling loading method in the table

Now I will share with you a vue element-ui table table rolling loading method, which has a good reference value and I hope it will be helpful to everyone.

Add global registration event to listen for scrolling events

window.Vue.directive('loadmore', {
 bind(el, binding) {
 const selectWrap = el.querySelector('.el-table__body-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 represented by 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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the select drop-down list through Vue.js, the specific operations are as follows

How to solve iview The problem of misaligned select drop-down box options. The specific operations are as follows

How to solve the problem that the selected value does not change after vue changes the calculated attribute. The specific operations are as follows

The above is the detailed content of About how element-ui in vue implements the rolling loading method in the table. For more information, please follow other related articles on the PHP Chinese website!