element-ui implementiert das rollierende Laden von Tabellen

Dieser Artikel teilt Ihnen hauptsächlich die rollierende Lademethode der Vue-Element-UI-Tabelle mit. Sie hat einen guten Referenzwert und ich hoffe, dass sie allen helfen kann.

Fügen Sie ein globales Registrierungsereignis hinzu, um auf Scroll-Ereignisse zu warten

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

Zeichen wird zum Markieren der Position verwendet

Lassen Sie scrollDistance direkt === Zeichen und Es gibt keine Garantie dafür, dass es jedes Mal ausgelöst wird, daher wird es als Intervall ausgedrückt. Auf das Problem der häufigen Auslösung wird später noch eingegangen.

Ereignisse hinzufügen

Benutzerdefinierte Ereignisse zu Tabellen hinzufügen, 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

Verwandte Empfehlungen:

Detaillierte Erklärung der Bewegung von Vue.js Die Endkomponentenbibliothek mint-ui realisiert unendliches Scrollen und Laden von mehr

So implementieren Sie die Funktion zum Scrollen und Laden von mehr in Vue

Angularjs scrollt und lädt mehr mehrere Daten

Das obige ist der detaillierte Inhalt vonelement-ui implementiert das rollierende Laden von Tabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!