如何在Vuetify的v-data-table组件上监听滚动事件？

针对你提到的设置了固定高度、表头固定的v-data-table的主体滚动事件监听需求，由于Vuetify没有为该场景内置滚动事件抛出，可通过手动绑定滚动容器事件的方式实现：

实现步骤 #

• 首先给v-data-table添加ref属性，用于快速定位组件DOM：

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

• 在组件挂载阶段获取表格内部滚动容器（固定表头场景下滚动区域是类名为.v-data-table__wrapper的元素），绑定scroll事件，同时在组件卸载前解绑事件避免内存泄漏：

// Vue2 写法
mounted() {
  const scrollContainer = this.$refs.myDataTable.$el.querySelector('.v-data-table__wrapper')
  scrollContainer.addEventListener('scroll', this.onTableScroll)
},
beforeDestroy() {
  const scrollContainer = this.$refs.myDataTable.$el.querySelector('.v-data-table__wrapper')
  scrollContainer?.removeEventListener('scroll', this.onTableScroll)
},
methods: {
  onTableScroll(e) {
    // 可获取所有滚动相关参数
    const scrollTop = e.target.scrollTop // 垂直滚动距离
    const isBottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight // 是否滚动到底部
    console.log('表格滚动触发', scrollTop, isBottom)
    // 自定义业务逻辑
  }
}

适配Vuetify3的差异点 #

如果是Vuetify3+Vue3环境，仅生命周期和ref获取逻辑有微调：

// Vue3 组合式API写法
import { ref, onMounted, onBeforeUnmount } from 'vue'

const myDataTable = ref(null)

const onTableScroll = (e) => {
  // 业务逻辑同Vue2写法
}

onMounted(() => {
  const scrollContainer = myDataTable.value.$el.querySelector('.v-data-table__wrapper')
  scrollContainer.addEventListener('scroll', onTableScroll)
})

onBeforeUnmount(() => {
  const scrollContainer = myDataTable.value.$el.querySelector('.v-data-table__wrapper')
  scrollContainer?.removeEventListener('scroll', onTableScroll)
})

注意事项 #

• 绑定事件需要在组件DOM完全渲染后执行，不要在created等更早的生命周期操作
• 如果表格通过v-if动态显示隐藏，需要在表格显示后重新执行事件绑定逻辑

内容的提问来源于stack exchange，提问作者DZN