element-ui implémente le chargement progressif de la table

Cet article partage principalement avec vous la méthode de chargement progressif de la table vue element-ui. Il a une bonne valeur de référence et j'espère qu'il pourra aider 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()
  }
 })
 }
})

le signe est utilisé pour marquer la position

Laisser directement scrollDistance === signe et Il n'y a aucune garantie qu'il se déclenchera à chaque fois, il est donc exprimé sous forme d'intervalle. La question des déclenchements fréquents sera abordée ultérieurement.

Ajouter des événements

Ajoutez des événements personnalisés aux tables qui doivent être chargées sans fil, v-loadmore="loadMore". Définir 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

Recommandations associées :

Explication détaillée du mouvement de Vue.js La bibliothèque de composants finaux mint-ui réalise un défilement infini et un chargement supplémentaire

Comment implémenter la fonction de défilement et de chargement supplémentaire dans vue

Angularjs défile et charge plus de données multiples

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!