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:

AjaxUpLoad.js for file upload

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!