5 библиотек для создания tree view во Vue

Введение

Реализация древовидных структур на веб-странице — частая задача при разработке интерфейсов, где нужно показать иерархию данных. Деревья используются в файловых менеджерах, навигационных меню, редакторах прав доступа и многих других проектах. Если вы работаете с Vue, то вопрос о выборе оптимального компонента для tree-view встанет довольно скоро.

В этой статье я расскажу вам про пять наиболее популярных и функциональных библиотек для создания tree view во Vue. На конкретных примерах покажу, как их использовать, какие функции они предоставляют: перетаскивание, фильтрацию, выделение элементов, работу с большими списками и т.д. Статья поможет вам быстро подобрать библиотеку под свои задачи, понять плюсы и минусы каждого решения и начать использовать выбранный компонент.

Vue-treeselect

Краткий обзор

vue-treeselect — это универсальный компонент дерева с поддержкой поиска, мультивыбора, асинхронной загрузки и расширения через слоты. Его часто выбирают для задач, где требуется комбо-дерево с фильтрацией.

Ключевые особенности

• Мультивыбор (или одиночный выбор)
• Фильтрация/поиск по узлам
• Возможность отображения тысяч элементов за счет lazy loading
• Асинхронная загрузка данных
• Поддержка настроек визуализации через пользовательские слоты

Пример установки и базового использования

Давайте начнем с простой интеграции:

npm install @riophae/vue-treeselect

В файле компонента:

import Treeselect from '@riophae/vue-treeselect'
// Не забудьте подключить стили
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

В шаблоне можно использовать так:

<template>
  <treeselect
    v-model="selected"
    :multiple="true"
    :options="options"
    placeholder="Выберите элементы"
  />
</template>

<script>
export default {
  components: { Treeselect },
  data() {
    return {
      selected: [],
      // Пример структуры данных для дерева
      options: [
        {
          id: 'folder1',
          label: 'Папка 1',
          children: [
            { id: 'file1', label: 'Файл 1' },
            { id: 'file2', label: 'Файл 2' }
          ]
        },
        {
          id: 'folder2',
          label: 'Папка 2'
        }
      ]
    }
  }
}
</script>

// Здесь компонент показывает дерево с двумя корневыми узлами и вложенными файлами.

Асинхронная загрузка данных

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

methods: {
  loadChildren({ action, parentNode, callback }) {
    // Ваш асинхронный запрос к серверу
    fetch(`/folders/${parentNode.id}/children`)
      .then(response => response.json())
      .then(children => callback(null, children))
      .catch(error => callback(error))
  }
}

Добавьте в компоненте prop :load-options="loadChildren".

Когда стоит выбирать vue-treeselect

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

Vue-draggable-nested-tree

Краткий обзор

Библиотека, ориентированная на задачи drag-and-drop: перетаскивание узлов дерева с возможностью менять структуру. Это идеальный выбор для интерактивных менеджеров файлов или категорий.

Основные возможности

• Перетаскивание элементов с изменением структуры
• Поддержка глубоко вложенных узлов
• Кнопки быстрого добавления и удаления нод
• Опциональный рендеринг кастомных элементов для каждого узла

Установка и инит компонента

npm install vue-draggable-nested-tree

Пример использования с настройкой опций:

<template>
  <vue-draggable-nested-tree
    :value="treeData"
    :props="treeProps"
    @change="onChange"
  >
    <template v-slot="{ node }">
      <span>
        {{ node.label }}
        <button @click="addChild(node)">+</button>
      </span>
    </template>
  </vue-draggable-nested-tree>
</template>

<script>
import VueDraggableNestedTree from "vue-draggable-nested-tree"

export default {
  components: { VueDraggableNestedTree },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Категория 1',
          children: [
            { id: 11, label: 'Подкатегория 1.1' }
          ]
        }
      ],
      // Описывает ключи для дерева
      treeProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    onChange(newTree) {
      // Срабатывает при перетаскивании/изменении дерева
      this.treeData = newTree
    },
    addChild(parent) {
      parent.children = parent.children || []
      parent.children.push({ id: Date.now(), label: 'Новый элемент' })
    }
  }
}
</script>

// Здесь вы можете перетаскивать элементы, а также добавлять новые подузлы через кнопку.

Когда выбирать эту библиотеку

vue-draggable-nested-tree отлично подходит, когда пользователь должен активно редактировать структуру дерева. Хорошо работает в админках, редакторах меню и внутри веб-приложений с управлением иерархией.

Vue Tree View

Краткий обзор

vue-tree-view — простое, но гибкое решение, позволяющее построить дерево с поддержкой открытия/закрытия ветвей. Это более легковесная альтернатива тяжелым библиотекам.

Возможности

• Нативное раскрытие/скрытие узлов
• Выбор ноды кликом
• Минимум зависимостей и легкость стилизации
• Можно использовать как “read-only” дерево или добавить обработчики событий

Пример базовой интеграции

Установим через NPM:

npm install vue-tree-view

Используем в компоненте:

<template>
  <tree-view :data="treeData" @nodeClick="onNodeClick"/>
</template>

<script>
import TreeView from 'vue-tree-view'

export default {
  components: { TreeView },
  data() {
    return {
      treeData: [
        {
          name: "Папка 1",
          children: [
            { name: "Файл 1.1" },
            { name: "Файл 1.2" }
          ]
        },
        {
          name: "Папка 2"
        }
      ]
    }
  },
  methods: {
    onNodeClick(node) {
      // Действие при выборе узла
      alert("Выбрано: " + node.name)
    }
  }
}
</script>

// В этом примере дерево показывает две папки. По клику можно узнать, какой элемент выбран.

Когда стоит использовать

Для задач, где основная цель — просто отобразить иерархию и не требуется drag-and-drop или расширенный функционал. Отлично для быстрых прототипов, кастомных меню, небольших файловых деревьев.

Vue-json-tree-view

Краткий обзор

Простое, но мощное решение, ориентированное на отображение JSON-структур в виде дерева, с возможностью разворачивания/сворачивания узлов.

Ключевые функции

• Автоматическая поддержка любых JSON-данных (глубоко вложенные объекты/массивы)
• Раскрытие/закрытие любого уровня
• Минимальная конфигурация
• Отлично подходит для инструментов по просмотру JSON

Установка и минимальный пример

npm install vue-json-tree-view

Использование:

<template>
  <json-tree :data="jsonData"/>
</template>

<script>
import JsonTree from 'vue-json-tree-view'

export default {
  components: { JsonTree },
  data() {
    return {
      jsonData: {
        user: {
          id: 1,
          name: "Иван",
          config: {
            theme: "dark",
            notifications: true
          }
        },
        tags: ["vue", "tree", "json"]
      }
    }
  }
}
</script>

// Здесь библиотека автоматически прорисует дерево для структуры данных, которую вы передадите.

Когда выбирать vue-json-tree-view

Когда нужно визуализировать произвольную вложенную структуру, особенно общего назначения (например, результаты API-запросов, дебаг-данные или редактирование JSON).

Vue3 Tree

Краткий обзор

Эта библиотека создана именно для Vue 3. Она сочетает легкость интеграции, высокую производительность и современную архитектуру с поддержкой TypeScript.

Основные преимущества

• Поддержка Vue 3 и Composition API
• Гибкое управление раскрытием, выделением, фильтрацией узлов
• Скорость работы даже с крупными структурами (1000+ узлов)
• Настройка кастомного шаблона отображения ветвей через scoped slots
• Активно развивается

Пример использования

Добавим:

npm install vue3-tree

В компоненте:

<template>
  <Vue3Tree
    :nodes="treeNodes"
    :options="treeOptions"
    @node-click="handleNodeClick"
  />
</template>

<script>
import { Vue3Tree } from 'vue3-tree'

export default {
  components: { Vue3Tree },
  data() {
    return {
      treeNodes: [
        {
          id: 1,
          label: 'Категория',
          children: [
            { id: 2, label: 'Подкатегория 1' },
            { id: 3, label: 'Подкатегория 2' }
          ]
        }
      ],
      treeOptions: {
        selectable: true,
        showCheckbox: true,
        draggable: false  // если потребуется drag-n-drop, этот параметр можно включить
      }
    }
  },
  methods: {
    handleNodeClick(node) {
      // Действие при клике по узлу
      console.log('Кликнули по узлу', node)
    }
  }
}
</script>

// Пример показывает, как быстро можно интегрировать vue3-tree в современный проект.

Для кого и для чего подходит

Если вы уже используете Vue 3, хотите использовать TypeScript и ищете гибкое, быстрое дерево, — это оптимальный выбор. Позволяет “дотюнивать” отображение и поведение узлов без написания собственных велосипедов.

Сравнительная таблица библиотек

Заключение

Выбор библиотеки для tree view в Vue зависит прежде всего от ваших целей, версии Vue, требованиям по кастомизации и редактируемости. Если вы реализуете формы с деревьями — вам подойдет vue-treeselect. Для управления структурой с перетаскиванием лучше выбрать vue-draggable-nested-tree или vue3-tree. Для визуализации структурированных данных или JSON подходят vue-tree-view и vue-json-tree-view.

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

Частозадаваемые технические вопросы по теме

Как реализовать большие деревья (1000+ узлов) без потери производительности?

При работе с большими деревьями важно использовать виртуализацию списка или асинхронную подгрузку данных. Например, vue-treeselect поддерживает асинхронную загрузку с помощью свойства :load-options, а vue3-tree изначально оптимизирован для работы с крупными структурами.

Как программно выделить/открыть нужные узлы дерева?

Практически все библиотеки поддерживают управление выделением через привязку к переменным (v-model для vue-treeselect, параметр selected для vue3-tree и т.д.). Просто задайте нужные значения этим переменным в data или через метод.

Как добавить иконки к узлам или изменить их внешний вид?

Почти все рассмотренные библиотеки поддерживают использование слотов или выполняют рендер узла через scoped slots/template. Воспользуйтесь кастомным шаблоном и вставьте туда нужную иконку на ваш выбор. Например, в vue3-tree это делается через slot для узла.

Как реализовать drag-n-drop между двумя разными деревьями?

Для этого потребуется специализированная поддержка в библиотеке. vue-draggable-nested-tree и vue3-tree дают такую возможность через передачу событий перетаскивания и обновление данных вручную в обоих деревьях. Ознакомьтесь с документацией по drag-and-drop событиям этих компонентов.

Можно ли синхронизировать видимость/состояние раскрытых узлов с сервером?

Да, в большинстве библиотек для этого существуют обработчики событий раскрытия (например, @expand/@collapse). В событиях вы можете отправлять информацию о текущем состоянии дерева на сервер и восстанавливать его при инициализации приложения, обновляя связанные переменные.