Comment faire défiler la table dans element-ui

Cette fois, je vais vous montrer comment faire défiler le tableautableau dans element-ui, et quelles sont les précautions pour faire défiler le tableau dans element-ui. Ce qui suit est un cas pratique, jetons un coup d'œil.

Ajouter une inscription globale é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()
  }
 })
 }
})

un panneau est utilisé pour marquer l'emplacement

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 un événement

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 indiquer si la page continuera à s'agrandir

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur PHP. Site chinois !

Lecture recommandée :

AjaxUpLoad.js pour le téléchargement de fichiers

Comment utiliser le composant carrousel de Vue

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!