Comment element-ui exploite l'effet de défilement de la table

Cette fois, je vais vous montrer comment element-ui exploite l'effet de défilement de la table. Quelles sont les précautions pour le défilement de la table d'opération element-ui Voici un cas pratique, jetons un coup d'œil.

Ajouter un enregistrement global événement pour écouter les événements défilants

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

le signe est utilisé pour marquer la position

Laisser directement le 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 des événements

Ajouter des événements personnalisés aux formulaires qui doivent être chargés sans fil, v-loadmore = "chargerPlus". 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 continuera à s'agrandir

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. contenu plus excitant, veuillez faire attention à php chinois Autres articles connexes en ligne !

Lecture recommandée :

Utiliser Compass dans Vue

Comment intégrer l'éditeur de texte enrichi UEditor

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!