QTree древовидные структуры

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

Основные элементы узла QTree:

label — текст, отображаемый в узле.
icon — иконка, ассоциированная с узлом (поддерживаются иконки Quasar и кастомные SVG).
children — массив дочерних узлов, которые повторяют ту же структуру.
expanded — булевое значение, указывающее, раскрыт ли узел по умолчанию.
selected — булевое значение, обозначающее выделен ли узел.
disable — блокирует выбор и взаимодействие с узлом.
header — позволяет добавлять специальные заголовки внутри дерева.

Пример структуры данных для QTree:

const treeData = [
  {
    label: 'Корневой узел',
    icon: 'folder',
    expanded: true,
    children: [
      { label: 'Файл 1', icon: 'insert_drive_file' },
      { label: 'Файл 2', icon: 'insert_drive_file' },
      {
        label: 'Подпапка',
        icon: 'folder',
        children: [
          { label: 'Файл 3', icon: 'insert_drive_file' }
        ]
      }
    ]
  }
]

Свойства компонента QTree

nodes — основной массив данных для дерева, соответствующий структуре узлов.
node-key — уникальный идентификатор узла, необходим для отслеживания состояния раскрытия и выбора.
default-expand-all — раскрывает все узлы при инициализации.
tick-strategy — стратегия выделения узлов: none, leaf, strict, leaf-filtered.
filter — строка или функция для поиска узлов.
dense — уменьшает высоту строк, упрощая отображение больших деревьев.

Методы и события

QTree предоставляет набор методов для управления состоянием дерева:

toggle(nodeKey) — раскрывает или скрывает узел по ключу.
expandAll() / collapseAll() — глобальное раскрытие/сворачивание всех узлов.
getSelectedNodes() — возвращает массив выделенных узлов.
setSelected(nodeKeys) — задаёт выделение узлов программно.
filterMethod(value, node) — позволяет настроить кастомную фильтрацию.

События:

@update:selected — срабатывает при изменении выделенных узлов.
@update:expanded — фиксирует раскрытие узлов.
@lazy-load — используется для динамической подгрузки дочерних узлов.

Настройка внешнего вида

QTree поддерживает кастомизацию с помощью слотов:

default — позволяет полностью изменить рендеринг узла.
header — вставка заголовков внутри дерева.
append — добавление действий или иконок справа от узла.
before — вставка элементов слева, например, чекбоксов или иконок состояния.

Пример кастомного узла:

<q-tree
  :nodes="treeData"
  node-key="id"
>
  <template v-slot:default="{ node, selected, expanded }">
    <div class="q-pa-xs row items-center">
      <q-icon :name="node.icon" class="q-mr-sm" />
      <span :class="{ 'text-bold': selected }">{{ node.label }}</span>
      <q-btn v-if="node.children" flat round dense icon="add" @click.stop="addChild(node)" />
    </div>
  </template>
</q-tree>

Поддержка асинхронной подгрузки

Для больших деревьев рекомендуется использовать ленивую загрузку узлов через событие @lazy-load. Это позволяет загружать дочерние элементы только по мере раскрытия родительского узла, что значительно экономит ресурсы.

function loadChildren(node) {
  if (!node.children) {
    fetch(`/api/children/${node.id}`)
      .then(res => res.json())
      .then(data => {
        node.children = data
      })
  }
}

Фильтрация и поиск

QTree позволяет фильтровать узлы с помощью свойства filter. Фильтрация может быть как простой (по строке), так и кастомной через функцию:

function customFilter(val, node) {
  return node.label.toLowerCase().includes(val.toLowerCase())
}

При использовании filter можно задавать стратегию отображения:

leaf — только листья фильтруются.
strict — фильтруются узлы без сохранения родительских цепочек.
leaf-filtered — показываются только узлы с подходящими листьями.

Интеграция с Vuex и реактивность

QTree полностью поддерживает реактивные данные Vue. Изменение массива nodes автоматически обновляет дерево. Для интеграции с Vuex стоит хранить nodes в состоянии и использовать геттеры для получения актуальной структуры, что позволяет централизованно управлять состоянием и синхронизировать выделение узлов.

computed: {
  treeNodes() {
    return this.$store.getters['tree/getNodes']
  }
}