Informationen dazu, wie element-ui in vue die rollierende Lademethode in der Tabelle implementiert

Jetzt werde ich Ihnen eine Vue-Element-UI-Tabellen-Scroll-Lademethode vorstellen, die einen guten Referenzwert hat und ich hoffe, dass sie für alle hilfreich ist.

Globales Registrierungsereignis hinzufügen, um auf Scrollereignisse 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

Das direkte Zulassen des scrollDistance ===-Zeichens 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 ein benutzerdefiniertes Ereignis zur Tabelle hinzu, das drahtlos geladen werden muss, 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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird für alle hilfreich sein Zukunft.

Verwandte Artikel:

So implementieren Sie eine Auswahl-Dropdown-Liste über Vue.js. Die spezifischen Vorgänge lauten wie folgt

So lösen Sie das Problem falsch ausgerichteter Auswahl-Dropdown-Box-Optionen:

So lösen Sie das Problem, dass sich der ausgewählte Wert nicht ändert Nachdem Vue das berechnete Attribut geändert hat, sind die spezifischen Operationen wie folgt:

Das obige ist der detaillierte Inhalt vonInformationen dazu, wie element-ui in vue die rollierende Lademethode in der Tabelle implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!