Базовая работа с деревом

Для работы с деревом в Element Plus используется компонент <el-tree>. Перед началом необходимо установить библиотеку и подключить стили:

npm install element-plus

В файле main.js или main.ts следует зарегистрировать библиотеку:

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

После этого можно использовать <el-tree> в компонентах Vue.

Основные свойства компонента

Компонент <el-tree> обладает широким набором свойств, позволяющих гибко управлять отображением и поведением узлов.

1. data

Основной источник данных для дерева. Ожидается массив объектов с определенной структурой:

const treeData = [
  {
    id: 1,
    label: 'Корень',
    children: [
      { id: 2, label: 'Дочерний элемент 1' },
      { id: 3, label: 'Дочерний элемент 2' }
    ]
  }
];

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

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

Ключевые моменты:

  • label — имя свойства, отображаемого как текст узла.
  • children — массив дочерних узлов.
  • node-key — уникальный идентификатор узла, необходим для программного доступа и методов компонента.

2. props

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

props: {
  label: 'название',
  children: 'дети',
  disabled: 'неактивен'
}

Если структура данных нестандартная, props обеспечивает корректное отображение дерева.

3. expand-on-click-node

Булево свойство, управляющее раскрытием узла при клике на него. По умолчанию true. Можно отключить для более сложных сценариев:

<el-tree
  :data="treeData"
  :expand-on-click-node="false"
  node-key="id">
</el-tree>

4. checkable и default-checked-keys

Включение чекбоксов для узлов и установка изначально выбранных элементов:

<el-tree
  :data="treeData"
  show-checkbox
  node-key="id"
  :default-checked-keys="[2]">
</el-tree>
  • show-checkbox — отображение чекбоксов.
  • default-checked-keys — массив идентификаторов узлов, которые будут отмечены при загрузке.

5. default-expanded-keys

Позволяет раскрыть определенные узлы при инициализации дерева:

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

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

1. getCheckedNodes()

Возвращает массив объектов всех отмеченных узлов:

this.$refs.tree.getCheckedNodes();

2. getHalfCheckedNodes()

Возвращает узлы, у которых выбраны только некоторые дочерние элементы.

3. setChecked(nodeKey, checked, deep)

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

this.$refs.tree.setChecked(3, true, true);
  • nodeKey — идентификатор узла
  • checked — состояние (true/false)
  • deep — если true, применяет действие ко всем дочерним узлам

4. setCurrentKey(key)

Устанавливает активный (выбранный) узел:

this.$refs.tree.setCurrentKey(2);

5. getCurrentNode()

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

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

1. node-click

Срабатывает при клике на узел:

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

<script>
export default {
  methods: {
    handleNodeClick(node) {
      console.log('Клик по узлу', node);
    }
  }
}
</script>

2. check-change

Вызывается при изменении состояния чекбокса узла:

handleCheckChange(node, checked) {
  console.log('Изменено состояние узла:', node.label, checked);
}

3. node-expand и node-collapse

Используются для отслеживания раскрытия и сворачивания узлов:

<el-tree
  :data="treeData"
  @node-expand="handleExpand"
  @node-collapse="handleCollapse"
  node-key="id">
</el-tree>

Ленивая загрузка узлов (Lazy Loading)

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

<el-tree
  :data="treeData"
  :props="treeProps"
  :load="loadNode"
  lazy
  node-key="id">
</el-tree>

<script>
export default {
  data() {
    return {
      treeData: [{ id: 1, label: 'Корень', children: [] }],
      treeProps: { children: 'children', label: 'label', isLeaf: 'isLeaf' }
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        resolve([{ id: 2, label: 'Дочерний 1' }, { id: 3, label: 'Дочерний 2' }]);
      } else {
        resolve([]);
      }
    }
  }
}
</script>
  • lazy — включает ленивую загрузку.
  • load(node, resolve) — функция, вызываемая при раскрытии узла для динамической подгрузки дочерних элементов.
  • isLeaf — поле, указывающее, что узел не имеет дочерних элементов.

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

Используется слот default для полной кастомизации:

<el-tree
  :data="treeData"
  node-key="id">
  <template #default="{ node, data }">
    <span style="color: blue">{{ data.label }}</span>
  </template>
</el-tree>

Можно отображать иконки, кнопки или другие элементы внутри каждого узла, управляя стилем через CSS или inline-стили.

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

Метод filter позволяет отображать только подходящие узлы:

this.$refs.tree.filter(value);
  • В компоненте задается ref="tree".
  • Для фильтрации необходимо определить функцию фильтрации через filter-node-method:
<el-tree
  :data="treeData"
  :props="{ label: 'label', children: 'children' }"
  :filter-node-method="filterNode"
  ref="tree"
  node-key="id">
</el-tree>

<script>
methods: {
  filterNode(value, data) {
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
  }
}
</script>

Важные рекомендации при работе с деревом

  • Всегда задавать node-key для уникальной идентификации узлов.
  • Использовать props при нестандартной структуре данных.
  • Для больших деревьев применять lazy и динамическую подгрузку.
  • При необходимости массового выбора узлов использовать setChecked с deep: true.
  • Слоты позволяют гибко кастомизировать отображение, включая иконки и элементы управления.

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

Оглавление