Vuetify中使用v-treeview插槽时如何获取当前节点的层级深度

方法1：预计算深度（全版本兼容，最推荐） #

该方案不依赖Vuetify内部API，版本迭代不受影响，稳定性最高。

• 先递归遍历树结构原始数据，给每个节点注入depth属性存储深度值，根节点深度可自定义从0或1开始。
  处理数据的示例代码：

const injectDepth = (items, currentDepth = 0) => {
  return items.map(item => {
    const processedItem = { ...item, depth: currentDepth }
    if (item.children?.length) {
      processedItem.children = injectDepth(item.children, currentDepth + 1)
    }
    return processedItem
  })
}

// 给v-treeview绑定items前先处理原始数据
myItems = injectDepth(原始树数据)

处理完成后直接在插槽中取值即可：

<v-treeview :items="myItems" :open="open">
  <template v-slot:label="{ item, open, selected }">
    当前深度：{{ item.depth }}，节点内容：{{ item }}
  </template>
</v-treeview>

方法2：尝试未公开插槽参数（仅Vuetify 2.x部分版本可用） #

部分Vuetify 2.x版本的label插槽存在未公开的level参数，可直接打印插槽全部参数确认是否存在：

<template v-slot:label="slotProps">
  <!-- 控制台打印所有插槽属性，确认是否有level字段 -->
  {{ console.log(slotProps) }}
</template>

注意：该方案依赖未公开的内部API，版本更新后可能失效，不推荐生产环境使用。

方法3：Vuetify 3 直接使用官方参数 #

如果你使用的是Vuetify 3版本，v-treeview的插槽官方已公开level参数，直接取值即可：

<v-treeview :items="myItems" :open="open">
  <template v-slot:label="{ item, level }">
    当前深度：{{ level }}，节点内容：{{ item }}
  </template>
</v-treeview>

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