-
-
Notifications
You must be signed in to change notification settings - Fork 7.1k
Closed
Labels
Description
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
andappend
).
Implementation Notes
- The
footer
slot should receive the same slot props asprepend
andappend
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.