Tree Select

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

В интерфейсах управления данными Tree Sel ect особенно полезен в ситуациях, когда элементы логически сгруппированы и образуют структуру родитель–потомок:

  • категории товаров
  • структура организаций
  • файловая система
  • иерархия регионов
  • меню и права доступа

Компонент сочетает удобство поиска и компактность выпадающего списка с наглядностью дерева.

В библиотеке Element Plus Tree Select реализован как компонент ElTreeSelect.

Подключение компонента

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

import { ElTreeSelect } fr om 'element-plus'

При глобальной регистрации Element Plus компонент доступен автоматически.

В шаблоне Vue он используется следующим образом:

<el-tree-select
  v-model="value"
  :data="data"
  placeholder="Выберите элемент"
/>

Базовое использование

Минимальная конфигурация Tree Sel ect требует:

  • модель выбранного значения
  • набор данных дерева

Пример

<template>
  <el-tree-select
    v-model="value"
    :data="data"
    placeholder="Выберите категорию"
  />
</template>

<script setup>
import { ref } fr om 'vue'

const value = ref(null)

const data = [
  {
    value: 1,
    label: 'Фрукты',
    children: [
      { value: 2, label: 'Яблоки' },
      { value: 3, label: 'Апельсины' }
    ]
  },
  {
    value: 4,
    label: 'Овощи',
    children: [
      { value: 5, label: 'Картофель' },
      { value: 6, label: 'Морковь' }
    ]
  }
]
</script>

Структура данных

Каждый элемент дерева представляет объект со следующими полями:

Поле Описание
value уникальное значение узла
label отображаемый текст
children массив дочерних элементов

Выбор нескольких элементов

Tree Sel ect поддерживает множественный выбор. Для этого используется свойство multiple.

<el-tree-select
  v-model="value"
  :data="data"
  multiple
/>

Особенности

  • v-model содержит массив значений
  • можно выбирать несколько узлов
  • используется чекбокс-интерфейс

Пример

const value = ref([])

Отображение чекбоксов

Для множественного выбора в дереве включаются чекбоксы через свойство:

show-checkbox
<el-tree-select
  v-model="value"
  :data="data"
  show-checkbox
  multiple
/>

Чекбоксы позволяют выбирать:

  • родительские узлы
  • дочерние узлы
  • целые ветви дерева

Свойство check-strictly

По умолчанию выбор узлов связан иерархически:

  • выбор родителя выбирает потомков
  • выбор потомков влияет на состояние родителя

Свойство check-strictly отключает эту связь.

<el-tree-select
  v-model="value"
  :data="data"
  show-checkbox
  check-strictly
/>

Поведение

Состояние Поведение
check-strictly = false родитель и потомки связаны
check-strictly = true каждый узел выбирается независимо

Свойство props

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

Для этого используется свойство props.

Пример

<el-tree-select
  v-model="value"
  :data="data"
  :props="props"
/>
const props = {
  value: 'id',
  label: 'name',
  children: 'nodes'
}

Пример данных

const data = [
  {
    id: 1,
    name: 'Документы',
    nodes: [
      { id: 2, name: 'PDF' },
      { id: 3, name: 'Word' }
    ]
  }
]

Разворачивание узлов

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

default-expand-all
<el-tree-select
  v-model="value"
  :data="data"
  default-expand-all
/>

Все узлы дерева раскрываются при отображении.

Ленивная загрузка данных

В крупных системах дерево может содержать тысячи элементов. В этом случае используется ленивая загрузка (lazy loading).

Свойства

Свойство Назначение
lazy включает ленивую загрузку
load функция загрузки детей

Пример

<el-tree-select
  v-model="value"
  lazy
  :load="loadNode"
/>

Функция загрузки

const loadNode = (node, resolve) => {
  if (node.level === 0) {
    resolve([
      { value: 1, label: 'Раздел 1' },
      { value: 2, label: 'Раздел 2' }
    ])
  } else {
    resolve([
      { value: node.value + '-1', label: 'Подраздел 1' },
      { value: node.value + '-2', label: 'Подраздел 2' }
    ])
  }
}

Параметры функции:

Параметр Описание
node текущий узел
resolve функция возврата данных

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

Tree Select поддерживает встроенный поиск.

Для включения используется свойство:

filterable
<el-tree-select
  v-model="value"
  :data="data"
  filterable
/>

При вводе текста дерево фильтруется по совпадению с label.

Кастомная логика фильтрации

Можно определить собственную функцию фильтрации.

<el-tree-select
  v-model="value"
  :data="data"
  filterable
  :filter-node-method="filterNode"
/>

Пример функции

const filterNode = (value, data) => {
  if (!value) return true
  return data.label.toLowerCase().includes(value.toLowerCase())
}

Отключение узлов

Отдельные элементы дерева можно сделать недоступными для выбора.

Для этого используется поле:

disabled

Пример

const data = [
  {
    value: 1,
    label: 'Администрирование',
    disabled: true
  },
  {
    value: 2,
    label: 'Пользователи'
  }
]

Отключенные элементы:

  • отображаются серым цветом
  • не реагируют на клики

Отображение только листовых узлов

В некоторых интерфейсах разрешается выбирать только конечные элементы дерева.

Для этого применяется:

check-on-click-node

и логика фильтрации узлов.

Также используется свойство:

render-after-expand

для оптимизации отображения.

Слот render-content

Для кастомизации отображения узлов используется слот render-content.

Пример

<el-tree-select
  v-model="value"
  :data="data"
>
  <template #default="{ data }">
    <span>
      {{ data.label }}
      <small>({{ data.value }})</small>
    </span>
  </template>
</el-tree-select>

Это позволяет добавлять:

  • иконки
  • счетчики
  • статусные индикаторы
  • дополнительные данные

Работа с событиями

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

change

Срабатывает при изменении выбранного значения.

<el-tree-select
  v-model="value"
  :data="data"
  @change="handleChange"
/>
const handleChange = (val) => {
  console.log(val)
}

node-click

Вызывается при клике по узлу дерева.

<el-tree-select
  v-model="value"
  :data="data"
  @node-click="handleNodeClick"
/>

visible-change

Срабатывает при открытии и закрытии выпадающего списка.

<el-tree-select
  v-model="value"
  :data="data"
  @visible-change="handleVisible"
/>

Управление раскрытыми узлами

Можно контролировать раскрытие узлов через:

default-expanded-keys

Пример

<el-tree-select
  v-model="value"
  :data="data"
  :default-expanded-keys="[1,2]"
/>

Здесь автоматически раскрываются узлы с value = 1 и value = 2.

Отображение выбранного пути

Иногда необходимо показывать полный путь элемента.

Для этого используется свойство:

show-all-levels

Пример отображения

Категории / Электроника / Смартфоны

Это улучшает понимание структуры дерева.

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

Для визуального разделения узлов можно добавить иконки.

Пример

import { Folder, Document } fr om '@element-plus/icons-vue'
<el-tree-select
  v-model="value"
  :data="data"
>
  <template #default="{ data }">
    <el-icon v-if="data.children">
      <Folder />
    </el-icon>
    <el-icon v-else>
      <Document />
    </el-icon>
    {{ data.label }}
  </template>
</el-tree-select>

Производительность

При работе с большими деревьями необходимо учитывать:

1. Ленивую загрузку

lazy

2. Рендеринг после раскрытия

render-after-expand

3. Ограничение глубины дерева

Чрезмерная вложенность ухудшает UX.

Типичные сценарии использования

Выбор категорий товаров

Каталог
 ├ Электроника
 │ ├ Телефоны
 │ ├ Ноутбуки
 └ Бытовая техника

Выбор организационной структуры

Компания
 ├ Отдел разработки
 ├ Отдел маркетинга
 └ HR

Выбор географических регионов

Мир
 ├ Европа
 │ ├ Германия
 │ └ Франция
 └ Азия

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

Свойство Описание
data данные дерева
multiple множественный выбор
show-checkbox отображение чекбоксов
filterable поиск
lazy ленивое построение дерева
load функция загрузки
default-expand-all раскрытие всех узлов
check-strictly независимый выбор
props настройка структуры данных

Архитектурные особенности

Tree Select построен на основе двух компонентов Element Plus:

  • ElSelect
  • ElTree

Внутри компонента:

  1. Select управляет выпадающим списком.
  2. Tree отвечает за иерархическое отображение данных.
  3. Состояние выбранных узлов синхронизируется через v-model.

Такая архитектура обеспечивает:

  • гибкость настройки
  • поддержку большого количества узлов
  • высокую производительность интерфейса.
Оглавление