如何捕获 v-data-table 组件上的滚动事件？

Posted 2023-02-22

【中文标题】如何捕获 v-data-table 组件上的滚动事件？

【英文标题】：How to catch scrolling event on v-data-table component?

【发布时间】：2021-10-30 07:34:50

【问题描述】：

有没有办法在 Vuetify frmework 的 v-data-table 组件上捕获滚动事件？

我的意思是表格具有固定高度的情况，因此表格主体会滚动。

<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

【参考方案1】：

代码如下：

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')
    
  
)

【讨论】：

我的意思是这个组件必须有一个内置的方法。但是如果没有，那么这个方法也很好，谢谢