¿Hay alguna manera de capturar el evento de desplazamiento en el componente v-data-table de Vuetify frmework?
Me refiero al caso en que la mesa tiene una altura fija, por lo que el cuerpo de la mesa se desplazará.
<v-data-table fixed-header :height=400 :headers="headers" :items="desserts" item-key="name" disable-pagination hide-default-footer ></v-data-table>Todo lo que tiene que hacer es apuntar al elemento DOM de la tabla después de que Vue se monte. Simplemente use "esto" y continúe desde allí... mire el gancho montado a continuación.
<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>aquí está el código:
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') } } })