Vue3中嵌套template标签无法渲染页面问题求助

为什么测试代码只显示"bye" #

Vue中，根<template>下直接嵌套的无指令匿名<template>会被编译器忽略，不会渲染其中的内容。你的测试代码里内层<template>没有绑定v-if、v-for等指令，也不是Vue3的多根节点结构，所以<h1>hi</h1>不会被渲染。

Vuetify可展开行数据表格的正确实现 #

要实现Vuetify的可展开行表格，不能随便嵌套<template>，需要使用组件提供的预定义插槽来实现：

1. 给v-data-table添加show-expand属性，启用展开功能
2. 使用v-slot:expanded-item="{ item }"插槽定义展开行的内容

示例代码：

<template>
  <v-data-table
    :items="products"
    :headers="headers"
    show-expand
    single-expand <!-- 可选：只允许展开一行 -->
  >
    <!-- 展开行内容插槽 -->
    <template v-slot:expanded-item="{ item }">
      <td :colspan="headers.length">
        <div class="pa-4">
          <h4>{{ item.name }} 详情</h4>
          <p>ID: {{ item.id }}</p>
          <p>库存: {{ item.stock }} 件</p>
          <p>描述: {{ item.description }}</p>
        </div>
      </td>
    </template>
  </v-data-table>
</template>

<script setup>
const headers = [
  { text: '产品名称', value: 'name' },
  { text: '类别', value: 'category' },
  { text: '价格', value: 'price' }
]

const products = [
  {
    id: 1,
    name: '无线耳机',
    category: '数码',
    price: 299,
    stock: 50,
    description: '主动降噪，续航24小时'
  },
  {
    id: 2,
    name: '机械键盘',
    category: '数码',
    price: 499,
    stock: 30,
    description: '青轴，RGB背光'
  }
]
</script>

关键说明 #

• 必须使用Vuetify提供的expanded-item插槽，才能正确绑定展开行的逻辑和样式
• 展开行的<td>需要设置colspan为表头的数量，确保内容占满整行
• 如果需要控制展开行为（比如单展开），可以添加single-expand属性

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