Vuetify v-data-table如何实现表头页脚固定、仅内容区域可滚动

问题原因 #

你当前配置下滚动条作用于整个表格的核心原因是固定高度属性和表头固定属性的配合逻辑存在问题，同时隐藏默认页脚后没有配套处理页脚的固定定位逻辑，导致整体滚动不符合预期。

实现代码 #

<template>
  <!-- 外层固定90vh高度的容器 -->
  <div class="table-wrapper">
    <v-data-table
      :headers="tableHeader"
      :items="items"
      item-key="id"
      disable-pagination
      fixed-header
      class="flex-grow-1"
    >
      <!-- 自定义固定页脚插槽，不需要自定义可删除该插槽部分 -->
      <template v-slot:footer>
        <div class="custom-footer">
          自定义页脚内容（可放入统计、操作按钮等元素）
        </div>
      </template>
    </v-data-table>
  </div>
</template>

<style scoped>
.table-wrapper {
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* 自定义页脚样式，使用默认页脚可删除该样式 */
.custom-footer {
  padding: 16px;
  border-top: 1px solid rgba(0,0,0,0.12);
}
</style>

配置说明 #

• 外层.table-wrapper设置为纵向flex布局，开启溢出隐藏，保证整个表格区域不会超出90vh的限制高度
• v-data-table添加flex-grow-1类，自动占满容器除页脚外的剩余高度，内容超出时滚动条仅作用于tbody内容区域
• 不需要手动设置height属性，fixed-header会自动处理表头的固定定位，默认页脚或插槽内的自定义页脚也会自动固定在表格底部，不会跟随内容滚动
• 表头项可提前配置固定width属性，避免出现表头和内容列宽不对齐的问题，示例如下：

  const tableHeader = [
    { text: '名称', value: 'name', width: '200px' },
    { text: '年龄', value: 'age', width: '100px' }
  ]
  

版本适配说明 #

如果你使用的是Vuetify 3版本，需要将上述代码中的fixed-header属性替换为sticky-header，其余配置逻辑完全一致。

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