Skip to content

[Feature Request] VTreeview footer slot #22100

@YourBrainEatsYou

Description

@YourBrainEatsYou

Problem to solve

VTreeview currently supports prepend and append slots, which make it possible to inject custom content before or after an item’s title. However, there is no mechanism to insert content after all of an item’s children.

This limitation makes certain use cases—such as displaying aggregated information, summaries, or custom controls related to a node’s children—difficult to implement without resorting to workarounds or duplicating items.

List Item Rendering (Proposed Footer Placement)

  ⌄ Parent 1
  | > Child 1-1
  | > Child 1-2
  | Footer for Parent 1
  |
  ⌄ Parent 2
  | > Child 2-1
  | > Child 2-2
  | Footer for Parent 2

Proposed solution

Introduce a footer slot for VTreeview. This slot would render below all of a node’s children but remain within the context of the parent node. This addition would align with the component’s existing slot structure while providing a clean, predictable way to extend functionality.

Example Usage

<template>
  <v-treeview>
    <template v-slot:footer="{ item, isOpen }">
      <!-- Rendered after all children of the current item -->
      <div class="tree-footer">
        Footer content for {{ item.title }}
      </div>
    </template>
  </v-treeview>
</template>

Benefits

  • Adds flexibility for developers to extend node rendering without workarounds.
  • Supports use cases like displaying totals, summaries, or custom controls beneath a node’s children.
  • Maintains consistency with existing slot-based customization (prepend and append).

Implementation Notes

  • The footer slot should receive the same slot props as prepend and append to maintain a consistent developer experience.
  • The slot should respect existing tree density, transitions, and expand/collapse behavior to avoid visual inconsistencies.
  • No breaking changes are expected, as this feature would be additive and optional.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions