BundyUI

Data

TreeItem

A single node within `Tree`, used internally for recursive nesting.

html
<UiTreeItem :item="..." :itemKey="..." />

Never mounted on its own

TreeItem reads the selection, expansion and colour it needs from a context Tree provides — rendering one outside a Tree throws. Every preview below is a real Tree, with the prop being described pointed out in the text.

Item

required

item is one node of the tree: its label, an optional icon, a value to select by, a disabled flag, and children for the nodes beneath it. Tree renders one TreeItem per entry in its items array and recurses through children — so the shape you write for Tree is the shape this receives, one node at a time.

Item key

required

itemKey is the path identifying this node within the tree — '0' for the first root, '0.1' for its second child, and so on. Tree builds it as it recurses and uses it to track which nodes are selected and expanded, which is why default-expanded takes those same strings rather than labels.

app
app.vue
components
Button.vue
Card.vue

Expanded by key: ['0', '0.1'] — the first root and its second child.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
itemrequired
TreeItem
—
The tree node data to render for this item.
itemKeyrequired
string
—
Unique key identifying this item within the tree, used to track selection and expansion state.

Types

ts
interface TreeItem {
    label: string;
    icon?: string;
    children?: TreeItem[];
    value?: string;
    disabled?: boolean;
    defaultExpanded?: boolean;
}
ts
interface TreeContext {
    selectedKeys: ComputedRef<string[]>;
    expandedKeys: ComputedRef<string[]>;
    toggleSelect: (key: string, item: TreeItem) => void;
    toggleExpand: (key: string, item: TreeItem) => void;
    multiple: ComputedRef<boolean>;
    disabled: ComputedRef<boolean>;
    color: ComputedRef<"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending">;
}