So scrollen Sie durch die Tabellentabelle in element-ui

Dieses Mal zeige ich Ihnen, wie Sie die TabelleTabelle in Element-UI scrollen und welche Vorsichtsmaßnahmen für das Scrollen der Tabelle in Element-UI gelten Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

Globales Registrierungsereignis hinzufügen , um auf Scrollereignisse zu warten

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()
  }
 })
 }
})

Das Schild dient zur Markierung des Ortes

Das direkte Vorzeichen von scrollDistance === garantiert nicht, dass es jedes Mal ausgelöst wird, daher wird es durch ein Intervall dargestellt. Auf das Problem der häufigen Auslösung wird später noch eingegangen.

Ereignis hinzufügen

Fügen Sie benutzerdefinierte Ereignisse zu Tabellen hinzu, die drahtlos geladen werden müssen, v-loadmore="loadMore". Definieren Sie ausgelöste Ereignisse in Methoden

 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 wird verwendet, um zu markieren, ob die Seite weiter wächst

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

AjaxUpLoad.js zum Hochladen von Dateien

So verwenden Sie die Karussellkomponente von Vue

Das obige ist der detaillierte Inhalt vonSo scrollen Sie durch die Tabellentabelle in element-ui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!