Программное управление деревом

Компонент Tree в Element Plus предназначен для отображения иерархических структур данных, таких как каталоги, меню, файловые системы и другие деревья. Основная структура данных для дерева — массив объектов, где каждый объект представляет узел с обязательным ключом label (или title) и при необходимости массивом children для вложенных элементов.

const data = [
  {
    label: 'Фрукты',
    children: [
      { label: 'Яблоки' },
      { label: 'Бананы' },
      { label: 'Апельсины' }
    ]
  },
  {
    label: 'Овощи',
    children: [
      { label: 'Морковь' },
      { label: 'Картофель' }
    ]
  }
];

Для отображения дерева используется компонент <el-tree> с передачей ему :data="data" и настройкой ключей через props.

<el-tree
  :data="data"
  :props="{ label: 'label', children: 'children' }"
  node-key="id"
  default-expand-all>
</el-tree>

Настройка ключей и структуры узлов

node-key — уникальный идентификатор узла, необходимый для программного управления выборкой, раскрытием и другими операциями. Если объект узла содержит свойство id, его удобно использовать:

const data = [
  { id: 1, label: 'Фрукты', children: [{ id: 11, label: 'Яблоки' }] }
];

props позволяет настраивать соответствие полей данных структуре дерева:

  • label — название узла, отображаемое в дереве.
  • children — массив дочерних элементов.
  • disabled — отключение узла.
  • isLeaf — принудительное определение узла как листа, даже если children есть или нет.
<el-tree
  :data="data"
  :props="{ label: 'label', children: 'children', disabled: 'disabled', isLeaf: 'isLeaf' }">
</el-tree>

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

Для динамического управления деревом используются рефы и методы компонента. Доступ к дереву осуществляется через ref:

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

Методы, полезные для программного управления:

  • setChecked(key, checked, deep = false) — программная установка состояния чекбокса узла.
  • getCheckedKeys() — получение массива ключей всех выбранных узлов.
  • getCheckedNodes() — получение массива объектов выбранных узлов.
  • setCurrentKey(key) — программное выделение узла.
  • getCurrentKey() — получение текущего выделенного узла.
  • expandNode(node, expandParents = false) — раскрытие конкретного узла.
  • collapseNode(node) — закрытие узла.
  • expandAll() и collapseAll() — раскрытие/сворачивание всех узлов.

Пример программного раскрытия узла по ключу:

this.$refs.treeRef.setCurrentKey(11);
this.$refs.treeRef.expandNode(this.$refs.treeRef.getNode(1));

Асинхронная загрузка дочерних узлов

Компонент поддерживает ленивую загрузку через load и lazy:

<el-tree
  :data="rootNodes"
  :props="defaultProps"
  lazy
  :load="loadNode"
  node-key="id">
</el-tree>
const loadNode = (node, resolve) => {
  if (node.level === 0) {
    resolve([{ id: 1, label: 'Фрукты', isLeaf: false }]);
  } else if (node.data.id === 1) {
    setTimeout(() => {
      resolve([{ id: 11, label: 'Яблоки', isLeaf: true }]);
    }, 500);
  } else {
    resolve([]);
  }
};
  • lazy — включает ленивую загрузку.
  • load — функция, которая вызывается при раскрытии узла и получает объект node и колбэк resolve для передачи дочерних элементов.

Настройка поведения чекбоксов

Для дерева с чекбоксами используется show-checkbox:

<el-tree
  :data="data"
  node-key="id"
  show-checkbox
  :check-strictly="true">
</el-tree>
  • show-checkbox — отображает чекбоксы.
  • check-strictly — отключает автоматическую связь состояния между родителями и детьми.
  • default-checked-keys — массив ключей, которые будут выбраны при инициализации.
defaultCheckedKeys: [11, 12]

Фильтрация узлов

Метод filter позволяет программно фильтровать узлы по определённому условию:

this.$refs.treeRef.filter(value => {
  return value.label.includes('Ябл');
});

Фильтр скрывает узлы, которые не соответствуют условию. Для сброса фильтра используется метод clearFilter().

События компонента

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

  • node-click — клик по узлу.
  • check-change — изменение состояния чекбокса.
  • current-change — изменение текущего выбранного узла.
  • node-expand / node-collapse — раскрытие/сворачивание узла.
  • node-contextmenu — вызов контекстного меню на узле.

Пример отслеживания клика и выделения узла:

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

methods: {
  handleNodeClick(nodeData) {
    console.log('Выбран узел:', nodeData.label);
  }
}

Динамическое обновление данных

Данные дерева можно обновлять в реальном времени, Vue автоматически отслеживает изменения:

this.data.push({ id: 3, label: 'Ягоды', children: [] });

Для обновления конкретного узла используется getNode(key) и манипуляция с его свойствами:

const node = this.$refs.treeRef.getNode(1);
node.data.label = 'Фрукты и овощи';

Настройка визуальных элементов

Компонент поддерживает слоты и scoped slots для кастомного отображения узлов:

<el-tree :data="data" node-key="id">
  <template #default="{ node, data }">
    <span>{{ data.label }} (уровень {{ node.level }})</span>
  </template>
</el-tree>
  • node.level — уровень узла в дереве.
  • node.isLeaf — является ли узел листом.
  • data — объект данных узла.

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

Оглавление