Tree

Компонент Tree предназначен для отображения иерархических структур данных. Он используется для представления вложенных объектов: каталогов файловой системы, категорий товаров, структуры организации, меню навигации и других древовидных данных.

Tree позволяет:

  • визуализировать вложенные структуры
  • раскрывать и сворачивать узлы
  • выбирать элементы
  • работать с чекбоксами
  • динамически загружать дочерние элементы
  • изменять структуру дерева программно

Компонент поддерживает большое количество параметров конфигурации, что делает его гибким инструментом для построения сложных интерфейсов.

Базовое использование

Минимальная конфигурация Tree включает передачу массива данных и указание структуры полей.

<template>
  <el-tree :data="data" />
</template>

<script setup>
const data = [
  {
    label: 'Уровень 1',
    children: [
      {
        label: 'Уровень 2-1',
        children: [
          { label: 'Уровень 3-1' }
        ]
      }
    ]
  },
  {
    label: 'Уровень 1-2'
  }
]
</script>

Каждый объект может содержать:

Поле Назначение
label текст узла
children дочерние элементы

Tree автоматически распознаёт вложенность и строит иерархическую структуру.

Настройка структуры данных (props)

В реальных проектах данные редко используют имена label и children. Компонент позволяет задать собственные названия полей.

<template>
  <el-tree
    :data="data"
    :props="defaultProps"
  />
</template>

<script setup>
const defaultProps = {
  children: 'nodes',
  label: 'name'
}

const data = [
  {
    name: 'Категория',
    nodes: [
      { name: 'Подкатегория' }
    ]
  }
]
</script>

Параметры props:

Параметр Назначение
children поле дочерних элементов
label отображаемый текст
disabled признак отключения узла
isLeaf признак листового элемента

Раскрытие узлов по умолчанию

По умолчанию дерево отображается свернутым. Раскрытие можно настроить несколькими способами.

Раскрытие всех узлов

<el-tree
  :data="data"
  default-expand-all
/>

Раскрытие определённых узлов

<el-tree
  :data="data"
  :default-expanded-keys="[1, 3]"
  node-key="id"
/>

Здесь:

  • node-key определяет уникальный идентификатор узла
  • default-expanded-keys содержит список узлов для раскрытия

Выбор узлов

Tree поддерживает одиночный выбор элемента.

<el-tree
  :data="data"
  node-key="id"
  highlight-current
  @node-click="handleNodeClick"
/>

Обработчик события:

function handleNodeClick(data) {
  console.log(data)
}

Параметр highlight-current подсвечивает выбранный элемент.

Работа с чекбоксами

Tree может отображать чекбоксы рядом с каждым узлом.

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
/>

При включении чекбоксов появляется возможность множественного выбора.

Поведение чекбоксов

Чекбоксы могут автоматически синхронизироваться между родительскими и дочерними элементами.

Стандартное поведение:

  • выбор родителя отмечает всех детей
  • частичный выбор отображается состоянием indeterminate

Отключение этой логики:

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  :check-strictly="true"
/>

Теперь каждый чекбокс работает независимо.

Получение выбранных элементов

Tree предоставляет методы для получения выбранных узлов.

Получение ключей

const checkedKeys = treeRef.value.getCheckedKeys()

Получение данных

const checkedNodes = treeRef.value.getCheckedNodes()

Пример:

<template>
  <el-tree
    ref="treeRef"
    :data="data"
    show-checkbox
    node-key="id"
  />
</template>

<script setup>
import { ref } from 'vue'

const treeRef = ref()
</script>

Ленивaя загрузка данных (Lazy Loading)

При работе с большими структурами данных удобно загружать узлы по мере раскрытия.

Для этого используется режим lazy loading.

<el-tree
  lazy
  :load="loadNode"
  node-key="id"
/>

Функция загрузки:

const loadNode = (node, resolve) => {
  if (node.level === 0) {
    return resolve([
      { id: 1, label: 'Узел 1' },
      { id: 2, label: 'Узел 2' }
    ])
  }

  setTimeout(() => {
    resolve([
      { id: node.data.id * 10, label: 'Подузел' }
    ])
  }, 500)
}

Параметры функции:

Параметр Назначение
node текущий узел
resolve функция передачи загруженных данных

Отключение узлов

Некоторые элементы дерева можно сделать недоступными.

const data = [
  {
    label: 'Категория',
    disabled: true
  }
]

Отключенный узел:

  • не реагирует на клики
  • не может быть выбран
  • отображается в неактивном состоянии

Фильтрация дерева

Tree поддерживает поиск по узлам.

<template>
  <el-input v-model="filterText" placeholder="Поиск" />

  <el-tree
    ref="treeRef"
    :data="data"
    :filter-node-method="filterNode"
  />
</template>

Функция фильтрации:

const filterNode = (value, data) => {
  if (!value) return true
  return data.label.includes(value)
}

Наблюдение за изменением строки поиска:

watch(filterText, val => {
  treeRef.value.filter(val)
})

Кастомизация отображения узлов

Tree позволяет полностью изменить внешний вид узла.

<el-tree :data="data">
  <template #default="{ node, data }">
    <span>
      ? {{ data.label }}
    </span>
  </template>
</el-tree>

Доступные параметры слота:

Параметр Назначение
node объект узла
data данные узла

Это позволяет:

  • добавлять иконки
  • отображать дополнительную информацию
  • внедрять кнопки управления

Методы компонента

Tree предоставляет API для программного управления.

setCurrentKey

Выбирает узел программно.

treeRef.value.setCurrentKey(5)

getCurrentNode

Возвращает выбранный узел.

treeRef.value.getCurrentNode()

append

Добавляет дочерний элемент.

treeRef.value.append(
  { label: 'Новый элемент' },
  parentNode
)

remove

Удаляет узел.

treeRef.value.remove(node)

updateKeyChildren

Обновляет дочерние элементы узла.

treeRef.value.updateKeyChildren(
  nodeKey,
  newChildren
)

Основные события

Компонент генерирует события для отслеживания действий пользователя.

Событие Описание
node-click клик по узлу
node-contextmenu контекстное меню
check изменение чекбокса
check-change изменение состояния узла
node-expand раскрытие узла
node-collapse сворачивание узла

Пример:

<el-tree
  :data="data"
  @node-expand="handleExpand"
/>

Оптимизация производительности

При работе с большими деревьями важно учитывать несколько факторов:

1. Lazy loading

Позволяет загружать только необходимые части структуры.

2. Уникальные ключи

Всегда использовать node-key, чтобы Vue корректно отслеживал изменения.

3. Ограничение глубины

Чрезмерно глубокие деревья ухудшают производительность DOM.

Типичный формат данных

На практике структура дерева часто выглядит следующим образом:

const data = [
  {
    id: 1,
    label: 'Документы',
    children: [
      {
        id: 2,
        label: 'Отчёты',
        children: [
          {
            id: 3,
            label: '2024'
          }
        ]
      }
    ]
  }
]

Такой формат:

  • легко сериализуется
  • удобно хранится в базе данных
  • прост в работе с API

Использование дерева как навигации

Tree часто применяется для создания навигационных панелей.

Пример структуры:

Панель управления
 ├ Пользователи
 │   ├ Список
 │   └ Роли
 ├ Заказы
 └ Настройки

Каждый узел может содержать маршрут:

{
  label: 'Пользователи',
  route: '/users'
}

Обработчик клика:

function handleNodeClick(data) {
  router.push(data.route)
}

Такой подход позволяет использовать Tree как полноценное меню приложения.

Расширенные сценарии использования

Компонент Tree используется во множестве интерфейсных решений:

  • файловые менеджеры
  • CMS-панели
  • структуры каталогов
  • организационные диаграммы
  • редакторы прав доступа
  • системы тегов и категорий

Гибкость конфигурации, поддержка ленивой загрузки, программного управления и кастомизации отображения делает Tree одним из наиболее мощных компонентов библиотеки Element Plus для работы с иерархическими структурами данных.

Оглавление