无法使用100vh时，如何为Vuetify的v-table配置fixed-header？

问题描述 #

使用Vuetify开发时，表格上方存在其他内容，需要为v-table开启fixed-header实现表头固定，但该属性必须配合height属性使用。设置height="100%"无效，直接用100vh会因为上方内容导致表格超出视口。另外，此前找到的方案无法处理表格动态新增行的场景。

可行方案 #

方案1：利用Flex布局让表格占满剩余空间 #

通过给父容器设置flex布局，让表格自动填充剩余可用空间，无需手动计算高度，同时完美适配行新增场景：

<template>
  <v-app>
    <v-main style="display: flex; flex-direction: column; height: 100vh;">
      <v-alert type="info" title="some other content goes here" />
      <!-- 表格容器占满剩余空间 -->
      <div style="flex: 1; overflow: hidden;">
        <v-table fixed-header>
          <thead>
            <tr>
              <th>Header</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="i in itemCount" :key="i">
              <td>x</td>
            </tr>
          </tbody>
        </v-table>
      </div>
      <v-btn @click="itemCount += 10">新增10行</v-btn>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'
const itemCount = ref(100)
</script>

原理：v-main设置height:100vh和垂直flex布局，上方的提示框占自身高度，中间的容器通过flex:1占据剩余所有空间，表格在这个容器内自动填满高度，fixed-header可正常生效，新增行时滚动区域会自动适配。

方案2：动态计算表格高度（适配复杂布局） #

如果flex布局不适用，可通过JavaScript动态计算表格可用高度，同时监听窗口大小变化和表格内容更新来实时调整：

<template>
  <v-app>
    <v-main ref="mainRef">
      <v-alert ref="alertRef" type="info" title="some other content goes here" />
      <v-table :fixed-header="true" :height="tableHeight">
        <thead>
          <tr>
            <th>Header</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="i in itemCount" :key="i">
            <td>x</td>
          </tr>
        </tbody>
      </v-table>
      <v-btn @click="itemCount += 10">新增10行</v-btn>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue'

const mainRef = ref(null)
const alertRef = ref(null)
const tableHeight = ref(0)
const itemCount = ref(100)

const calculateTableHeight = () => {
  if (!mainRef.value || !alertRef.value) return
  const mainHeight = mainRef.value.clientHeight
  const alertHeight = alertRef.value.clientHeight
  // 预留少量间距避免溢出
  tableHeight.value = mainHeight - alertHeight - 20
}

onMounted(() => {
  calculateTableHeight()
  window.addEventListener('resize', calculateTableHeight)
})

watch(itemCount, () => {
  calculateTableHeight()
})

onUnmounted(() => {
  window.removeEventListener('resize', calculateTableHeight)
})
</script>

原理：通过获取父容器和上方内容的高度，计算出表格可用高度；同时监听窗口大小变化和表格数据量变化，实时更新表格高度，确保fixed-header始终正常工作。

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