Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

353
Vistas
How to catch scrolling event on v-data-table component?

Is there a way to catch scrolling event on v-data-table component of Vuetify frmework?

I mean the case when table has a fixed height so the table body will scroll.

<v-data-table
  fixed-header
  :height=400
  :headers="headers"
  :items="desserts"
  item-key="name"
  disable-pagination
  hide-default-footer
></v-data-table>

https://codepen.io/Zurab-D/pen/yLXOyRJ

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

All you have to do is target the table DOM element after the Vue mounts. Just use "this" and go from there...check out the mounted hook below.

<template lang="html">
  <div class="graph-content">
    <v-data-table v-show="topArtistUplifts.length" id="topUpliftTable" class="data-table-custom"
      :headers="tableHeaders" :items="topArtistUplifts" fixed-header :height="tableHeight"
      :items-per-page="-1" hide-default-footer :mobile-breakpoint="0">

      <template v-slot:item.artist_name="{ item }">
        <span>
          <router-link :to="{ name: 'Artist', query: { artistId: item.artist_id, ...linkQuery }}"
            class="artist-link inline">
              {{ item.artist_name }}
          </router-link>
        </span>
      </template>
      <template v-slot:item.absolute_number="{ item }">
        <span>+{{ getAbbreviatedNum(item.absolute_number) }}</span>
      </template>
      <template v-slot:item.relative_number="{ item }">
        <span :class="percentChangeStyle(item.relative_number * 100)">{{ percentChangeFormat((item.relative_number * 100).toFixed(2)) }}</span>
      </template>
    </v-data-table>
    <div class="no-notifs full-height" v-show="!topArtistUplifts.length">
      No uplift to report yet – please check back soon.
    </div>
    <Loader v-if="updating.topArtistUplifts" :height="50"/>
  </div>
</template>

<script>
methods: {
  handleUpliftScroll(e) {
    console.log('yoooo i'm a table scroll event: ', e)
  },
},
mounted() {
  const tableWrapper = this.$el.children[0].children[0]
  tableWrapper.addEventListener('scroll', this.handleUpliftScroll)
}
</script>
about 4 years ago · Juan Pablo Isaza Denunciar

0

here is the code:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    desserts: Array.from({ length: 5000 }).map((v, k) => ({
        name: `#${k}`,
        calories: 518,
    })),
    headers: [
      { text: 'Dessert', value: 'name' },
      { text: 'Calories', value: 'calories' },
    ],
  }),
  mounted() {
    document.addEventListener('wheel', this.onScroll)
  },
  methods: {
    onScroll : function(){
      console.log('scroll')
    }
  }
})
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda