Vuetify VDataTable headers插槽props为空无法获取数据求助

核心原因与修复方案 #

1. 插槽名称误用 #

Vuetify 3 移除了 Vuetify 2 中的headers（复数）全局插槽，你当前使用的<template v-slot:headers="props">是无效的，自然拿不到任何数据。

• 若要自定义整个表头容器，使用header（单数）插槽，它会传入包含headers数组的props：

  <template v-slot:header="props">
    <pre>{{ props }}</pre> <!-- 这里能看到完整的插槽数据 -->
  </template>
  

• 若要自定义单个列的表头，使用header.列字段名格式的插槽，比如表头数组里有value: 'name'的列：

  <template v-slot:header.name="props">
    <span>{{ props.header.text }} (自定义表头)</span>
  </template>
  

2. 完整可用示例 #

<template>
  <VDataTable
    :headers="tableHeaders"
    :items="tableItems"
  >
    <!-- 全局表头容器自定义 -->
    <template v-slot:header="props">
      <tr>
        <th 
          v-for="header in props.headers" 
          :key="header.value"
          :class="{ 'sortable': header.sortable }"
        >
          {{ header.text }}
          <v-icon v-if="header.sortable">mdi-arrow-up-down</v-icon>
        </th>
      </tr>
    </template>

    <!-- 单个列的表头自定义 -->
    <template v-slot:header.name="props">
      <th class="text-primary">
        {{ props.header.text }}
      </th>
    </template>
  </VDataTable>
</template>

<script setup>
const tableHeaders = [
  { text: '商品名称', value: 'name', sortable: true },
  { text: '库存数量', value: 'stock', sortable: false },
  { text: '操作', value: 'action' }
]

const tableItems = [
  { name: '笔记本电脑', stock: 15 },
  { name: '无线鼠标', stock: 30 }
]
</script>

3. 额外排查项 #

• 确认VDataTable的headers属性已传入非空数组，空表头会导致插槽props无有效数据
• 检查是否有其他代码（如自定义指令、全局样式）干扰了插槽上下文

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