À propos de la façon dont element-ui dans vue implémente la méthode de chargement progressif dans le tableau

Maintenant, je vais partager avec vous une méthode de chargement par défilement de table vue element-ui, qui a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Ajouter un événement d'inscription global pour écouter les événements de défilement

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

un signe est utilisé pour marquer la position

La définition directe du signe scrollDistance === ne garantit pas qu'il sera déclenché à chaque fois, il est donc représenté par un intervalle. La question des déclenchements fréquents sera abordée ultérieurement.

Ajouter un événement

Ajoutez un événement personnalisé à la table qui doit être chargé sans fil, v-loadmore="loadMore". Définissez les événements déclenchés dans les méthodes

 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 est utilisé pour marquer si la page continue d'augmenter

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde. à l'avenir.

Articles connexes :

Comment implémenter la liste déroulante de sélection via Vue.js, les opérations spécifiques sont les suivantes

Comment résoudre iview Le problème des options de liste déroulante de sélection mal alignées. Les opérations spécifiques sont les suivantes

Comment résoudre le problème du fait que la valeur sélectionnée ne change pas. après que vue modifie l'attribut calculé, les opérations spécifiques sont les suivantes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!