Vuetify 3数据表格问题：固定表头与无限滚动冲突

问题原因 #

当给v-data-table同时设置fixed-header和固定height时，组件会在内部生成独立的tbody滚动容器，而v-infinite-scroll默认监听父容器的滚动事件，两者滚动上下文不匹配，导致滚动到底部时无法触发加载回调。

解决方案 #

通过调整布局结构，让滚动事件发生在外层容器，同时保留表头固定特性：

1. 移除v-data-table的height属性，将高度约束转移到外层容器
2. 给外层容器设置固定高度和滚动属性
3. 让v-infinite-scroll监听外层容器的滚动事件

修改后的代码示例 #

<template>
  <div class="table-container">
    <v-infinite-scroll 
      :items="items" 
      :onLoad="load" 
      target=".table-container"
      :disabled="isLoading || hasNoMoreData"
    >
      <v-data-table 
        :headers="headers" 
        :items="items" 
        show-select="compact" 
        fixed-header 
        v-model="table"
        @click:row="open"
      >
        <template #top>
          <v-toolbar density="compact" flat>
            <!-- 你的工具栏内容 -->
          </v-toolbar>
        </template>
        <template #empty>
          <p>No more</p>
        </template>
      </v-data-table>
      <div class="footer">
        <span>Total Rows:{{ items.length }}</span>
      </div>
    </v-infinite-scroll>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([])
const isLoading = ref(false)
const hasNoMoreData = ref(false)

const load = async () => {
  if (isLoading.value || hasNoMoreData.value) return
  
  isLoading.value = true
  try {
    // 替换为你的API请求逻辑
    const newData = await fetchNextPage()
    if (newData.length === 0) {
      hasNoMoreData.value = true
      return
    }
    items.value = [...items.value, ...newData]
  } catch (err) {
    console.error('加载失败:', err)
  } finally {
    isLoading.value = false
  }
}

// 模拟API请求的示例函数
const fetchNextPage = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(Array.from({length: 10}, (_, i) => ({ 
        id: items.value.length + i + 1, 
        name: `Item ${items.value.length + i + 1}` 
      })))
    }, 1000)
  })
}
</script>

<style scoped>
.table-container {
  height: 100vh;
  overflow-y: auto;
}

.footer {
  padding: 1rem;
  text-align: center;
  background-color: #f5f5f5;
}
</style>

关键说明 #

• 外层容器.table-container承担滚动容器的角色，设置height:100vh和overflow-y:auto确保滚动区域明确
• v-data-table的fixed-header会自动将表头固定在容器顶部，无需额外设置
• 通过target属性指定v-infinite-scroll监听外层容器的滚动，确保滚动到底部时触发加载
• 添加disabled属性避免重复加载和无效请求

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