element-ui implements rolling loading of table tables

This article mainly shares with you the rolling loading method of vue element-ui table. It has a good reference value and I hope it can help everyone.

Add a global registration event to listen for scroll 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

There is no guarantee that scrollDistance === sign directly 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

Related recommendations:

Detailed explanation of the mobile component of Vue.js Library mint-ui implements infinite scrolling to load more

How to implement the function of scrolling to load more in vue

Angularjs scrolling to load more data

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