Tree компонент

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

Импорт и базовое использование

Для использования компонента необходимо импортировать его из библиотеки:

import { NTree } from 'naive-ui'

Базовая структура данных для Tree должна быть в виде массива объектов с полями label и key. Пример:

const treeData = [
  {
    label: 'Папка 1',
    key: '1',
    children: [
      { label: 'Файл 1-1', key: '1-1' },
      { label: 'Файл 1-2', key: '1-2' }
    ]
  },
  {
    label: 'Папка 2',
    key: '2'
  }
]

Использование компонента с минимальной конфигурацией:

<NTree :data="treeData" />

Настройка узлов

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

  • disabled — отключение узла.
  • checkable — возможность отображения чекбокса.
  • expandable — возможность разворачивания/сворачивания узла.
  • children — массив дочерних узлов.

Пример узла с чекбоксом и отключением:

const treeData = [
  {
    label: 'Папка 1',
    key: '1',
    checkable: true,
    disabled: true,
    children: [
      { label: 'Файл 1-1', key: '1-1', checkable: true }
    ]
  }
]

Режимы выбора

Tree поддерживает несколько режимов выбора:

  1. Одиночный выбор — по умолчанию выбирается один узел.
  2. Множественный выбор с чекбоксами — при checkable: true на узлах.
  3. Выбор с полной и частичной проверкой — автоматически устанавливает состояние «частично выбран» для родительских узлов, если выбраны только некоторые дочерние.

Для отслеживания состояния выбора используется свойство value (или checkedKeys для чекбоксов):

<NTree
  :data="treeData"
  :checked-keys="['1-1']"
  checkable
/>

Динамическая подгрузка узлов

Tree может поддерживать ленивую загрузку данных для больших деревьев. Для этого используется функция load:

const loadNode = async (node) => {
  // имитация асинхронного запроса
  return [
    { label: `Подузел ${node.key}-1`, key: `${node.key}-1` },
    { label: `Подузел ${node.key}-2`, key: `${node.key}-2` }
  ]
}
<NTree :load="loadNode" :data="treeData" />

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

Пользовательские шаблоны узлов

Tree поддерживает слоты для кастомизации отображения узлов:

<NTree :data="treeData" v-slot="{ node, level }">
  <div :style="{ paddingLeft: `${level * 20}px` }">
    <strong>{{ node.label }}</strong>
  </div>
</NTree>

Это позволяет полностью контролировать визуальное оформление каждого узла, включая использование иконок, цветов, кнопок и других элементов.

События и методы

Компонент Tree предоставляет множество событий:

  • on-update:value — вызывается при изменении выбранного узла.
  • on-expand — срабатывает при раскрытии узла.
  • on-check — вызывается при изменении состояния чекбокса.
  • on-select — при клике на узел.

Методы для работы с деревом:

  • getNode(key) — получение узла по ключу.
  • getCheckedKeys() — получение массива выбранных ключей.
  • setCheckedKeys(keys) — программное обновление состояния выбора.
  • expandNode(key) — программное раскрытие узла.

Пример использования события on-check:

<NTree
  :data="treeData"
  checkable
  @on-check="handleCheck"
/>

<script>
const handleCheck = (checkedKeys, info) => {
  console.log('Выбранные узлы:', checkedKeys)
  console.log('Подробная информация:', info)
}
</script>

Стиль и кастомизация

Tree наследует возможности стилизации Naive UI через темы и CSS-переменные. Основные переменные:

  • --tree-item-height — высота строки.
  • --tree-item-padding — отступ узла.
  • --tree-item-color — цвет текста.
  • --tree-item-bg-color — фоновый цвет узла.

Пример переопределения стиля:

<NTree :data="treeData" style="--tree-item-height: 40px; --tree-item-color: #1f2937;" />

Также можно использовать классы и scoped CSS для более детальной кастомизации отдельных узлов.

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

Для больших деревьев рекомендуется:

  • Использовать ленивую загрузку (load) вместо полного рендеринга всех узлов.
  • Ограничивать количество одновременно отображаемых узлов с помощью динамического раскрытия.
  • Использовать ключи (key) уникальные для каждого узла для корректного рендеринга и обновления.

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

Оглавление