[Feature Request] Add index, depth, path to the VTreeView

[kieuminhcanh]

Problem to solve

What problem does this feature solve?

When working with VTreeView, it's often necessary to have access to additional metadata such as the index, depth, and path of each node. This information is crucial for a variety of use cases including:

• Custom rendering based on the depth of the node.
• Identifying the position of a node within its parent.
• Implementing breadcrumb navigation or hierarchical display based on the node's path.
• Enhancing data manipulation and interaction based on the node's hierarchy.

Proposed solution

Enhance the VTreeView component to expose the following properties for each node:

1. Index: The zero-based position of the node within its parent's children.
2. Depth: The level of the node within the tree, starting from 0 for the root.
3. Path: An array representing the path to the node, where each element is the index of the node at that level.

Proposed solution

Adding these properties would not only simplify the development process but also make VTreeView more versatile and powerful for handling complex tree structures. This feature aligns with the flexibility and ease of use that Vuetify aims to provide.

Example

<v-treeview
  :items="items"
>
  <template v-slot:item="{ item, index, depth, path }">
    <div>
      <span>{{ item.name }}</span>
      <span>Index: {{ index }}</span>
      <span>Depth: {{ depth }}</span>
      <span>Path: {{ path.join(' > ') }}</span>
    </div>
  </template>
</v-treeview>



<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->