Data

Tree

Visualizzazione gerarchica interattiva con supporto per selezione (single, multiple, checkbox), filtro testuale e espansione/collasso dei nodi.

Import

import { Tree } from '@pzeta/vue-components'
import type {
  TreeProps,
  TreeEmits,
  TreeNode,
  TreeSlots,
  TreeSelectionMode,
} from '@pzeta/vue-components'

Esempio Base

TreeNode

interface TreeNode {
  key?: string | number      // Chiave univoca del nodo (richiesta per selezione/espansione)
  label?: string             // Testo visualizzato
  icon?: string              // Classe icona (es. 'pi pi-folder')
  data?: unknown             // Dati custom associati al nodo
  type?: string              // Tipo nodo (per slot template personalizzati)
  children?: TreeNode[]      // Nodi figli
  style?: Record<string, string | number>
  class?: string
  selectable?: boolean       // false = nodo non selezionabile
  leaf?: boolean             // Nodo foglia (nasconde il toggle)
  expanded?: boolean         // Stato espansione iniziale
}

Props

Prop	Tipo	Default	Descrizione
`value`	`TreeNode[]`	`[]`	Array radice dei nodi
`selectionMode`	`'single' \| 'multiple' \| 'checkbox'`	`undefined`	Modalità selezione nodi
`selectionKeys`	`Record<string \| number, boolean> \| null`	`null`	Chiavi nodi selezionati (v-model:selectionKeys)
`expandedKeys`	`Record<string \| number, boolean>`	`{}`	Chiavi nodi espansi (v-model:expandedKeys)
`filter`	`boolean`	`false`	Abilita casella di filtro testuale
`filterPlaceholder`	`string`	`'Search...'`	Placeholder per il campo di ricerca
`filterMode`	`'lenient' \| 'strict'`	`'lenient'`	Modalità filtro: `lenient` mostra il nodo se uno dei figli corrisponde, `strict` richiede corrispondenza esatta
`filterBy`	`string`	`'label'`	Campo del nodo su cui applicare il filtro
`loading`	`boolean`	`false`	Mostra indicatore di caricamento
`loadingMode`	`'mask' \| 'icon'`	`'mask'`	Modalità visualizzazione loading
`class`	`string`	`''`	Classe CSS aggiuntiva

Emits

Evento	Payload	Descrizione
`update:selectionKeys`	`Record<string \| number, boolean> \| null`	Selezione cambiata
`update:expandedKeys`	`Record<string \| number, boolean>`	Chiavi espanse cambiate
`nodeSelect`	`TreeNode`	Nodo selezionato
`nodeUnselect`	`TreeNode`	Nodo deselezionato
`nodeExpand`	`TreeNode`	Nodo espanso
`nodeCollapse`	`TreeNode`	Nodo collassato

Slot

Slot	Scope	Descrizione
`default`	`{ node: TreeNode }`	Template personalizzato per il contenuto del nodo
`toggleicon`	`{ expanded: boolean }`	Icona toggle espansione custom
`checkboxicon`	`{ checked: boolean; partialChecked: boolean }`	Icona checkbox custom
`loadingicon`	—	Icona di caricamento custom

Esempi

Selezione singola

Selezione multipla

Selezione con checkbox

Con filtro

Template nodo personalizzato

Controllo espansione programmatico

Metodi esposti (defineExpose)

Metodo	Descrizione
`expandAll()`	Espande tutti i nodi che hanno figli
`collapseAll()`	Collassa tutti i nodi

Note sulla selezione

La prop selectionKeys è una mappa { [key]: true }.
In modalità single, un click deseleziona il nodo precedente.
In modalità multiple, il click aggiunge/rimuove dalla selezione senza richiedere Ctrl.
In modalità checkbox, ogni nodo ha una propria checkbox. I nodi con selectable: false non possono essere selezionati.

Accessibilità

Il contenitore usa role="tree". Ogni nodo è un elemento <li> dentro <ul>. I pulsanti di toggle sono elementi <button> accessibili da tastiera.

TypeScript

import type {
  TreeProps,
  TreeEmits,
  TreeNode,
  TreeSlots,
  TreeSelectionMode,
  TreeNodeProps,
} from '@pzeta/vue-components'

Timeline

Visualizza una sequenza di eventi in layout verticale, orizzontale o alternato, con marcatori stilizzabili e supporto alla selezione.

TreeTable

Tabella con struttura dati gerarchica espandibile, supporto per ordinamento, paginazione e selezione nodi tramite il sub-componente Column.