Tree

Дерево каталога

Проект
Документация
Тесты

С выбором узлов

Проект
Документация
Тесты

Выбрано:

Все ветки раскрыты

Проект
- Фронтенд
  - Компоненты
  - Composables
- Бэкенд
Документация
Тесты

Входные параметры

Имя	Тип	По умолчанию	Описание
`nodes`	`TreeNode[]`	`[]`	Корневые узлы дерева. Узел: `label` (текст), `value?`, `icon?` (SVG-код), `disabled?`, `children?` (вложенные узлы).
`selectable`	`boolean`	`false`	Включает выбор узлов.
`multiple`	`boolean`	`false`	Множественный выбор узлов.
`modelValue`	`string \| number \| Array<string \| number>`	`undefined`	Выбранные значения узлов (через `v-model`).
`expandAll`	`boolean`	`false`	Раскрыть все ветки дерева.

События

Имя	Аргументы	Когда срабатывает
`update:modelValue`	`value: string \| number \| Array<string \| number>`	При изменении выбора узлов.
`select`	`node: TreeNode`	При выборе узла (не срабатывает для отключённых).

Описание

Tree — иерархический список узлов с раскрытием/сворачиванием веток и выбором. Значение узла берётся из value, а при его отсутствии — из label. Подходит для каталогов, меню и любых вложенных структур.

Дополнительная информация

Компонент использует рекурсивный внутренний TreeBranch для отрисовки вложенных узлов.
Раскрытие ветки управляется внутренним состоянием expanded (Set значений); expandAll раскрывает всё.
Кнопка раскрытия помечается aria-expanded и aria-label; при selectable строки получают классы --selectable/--selected, отключённые — --disabled.
Выбор: клик по узлу эмитит select и update:modelValue; с multiple=false остаётся только один выбранный узел.
Отступ вложенности рассчитывается по глубине через padding-left.