Cascader

Компонент Cascader в библиотеке Element Plus предназначен для выбора значений из иерархических структур данных. Он часто используется для выбора категорий, регионов, или других объектов, имеющих вложенные уровни. Компонент реализует раскрывающиеся списки, где каждый следующий уровень зависит от выбранного значения на предыдущем уровне.

Ключевые свойства, влияющие на работу компонента:

  • options — массив объектов с данными для отображения. Каждый объект обычно имеет поля value, label и children для вложенных элементов.
  • props — объект, задающий ключи для полей данных, например: { value: 'id', label: 'name', children: 'nodes' }.
  • model-value — текущее выбранное значение или массив значений для многоуровневого выбора.
  • clearable — позволяет очистить выбранное значение.
  • disabled — блокирует компонент.
  • filterable — включает возможность поиска по значению.
  • change-on-select — определяет, обновляется ли значение при каждом выборе уровня или только на последнем.
<template>
  <el-cascader
    v-model="selectedRegion"
    :options="regionOptions"
    placeholder="Выберите регион"
    clearable
  />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectedRegion = ref([]);
    const regionOptions = [
      {
        value: 'asia',
        label: 'Азия',
        children: [
          { value: 'china', label: 'Китай' },
          { value: 'japan', label: 'Япония' }
        ]
      },
      {
        value: 'europe',
        label: 'Европа',
        children: [
          { value: 'france', label: 'Франция' },
          { value: 'germany', label: 'Германия' }
        ]
      }
    ];
    return { selectedRegion, regionOptions };
  }
};
</script>

Настройка структуры данных

Cascader позволяет использовать кастомные ключи для работы с данными, если структура отличается от стандартной. Свойство props позволяет задать поля для value, label и children:

<el-cascader
  v-model="selectedItem"
  :options="customOptions"
  :props="{ value: 'id', label: 'title', children: 'subItems' }"
/>

Это удобно при интеграции с API, где структура данных не совпадает с ожидаемой по умолчанию.

Многоуровневый выбор

Cascader поддерживает произвольное количество уровней вложенности. Важным параметром является change-on-select. При значении true выбор на любом уровне сразу обновляет v-model, при значении false — только выбор конечного уровня фиксирует значение.

<el-cascader
  v-model="selectedItem"
  :options="multiLevelOptions"
  change-on-select
/>

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

С помощью свойства filterable компонент позволяет искать значения в иерархии:

<el-cascader
  v-model="selectedItem"
  :options="regionOptions"
  filterable
  placeholder="Поиск региона"
/>

По умолчанию поиск ищет по полю label, но с помощью метода filter-method можно задать кастомную логику фильтрации.

<el-cascader
  v-model="selectedItem"
  :options="regionOptions"
  filterable
  :filter-method="customFilter"
/>

<script>
const customFilter = (node, keyword) => {
  return node.label.toLowerCase().includes(keyword.toLowerCase());
};
</script>

Асинхронная загрузка данных

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

<el-cascader
  v-model="selectedItem"
  :props="{ lazy: true, lazyLoad: loadData }"
/>

<script>
const loadData = (node, resolve) => {
  setTimeout(() => {
    const data = node.level === 0
      ? [{ value: 'asia', label: 'Азия', leaf: false }]
      : [{ value: 'china', label: 'Китай', leaf: true }];
    resolve(data);
  }, 500);
};
</script>
  • lazy — включает ленивую загрузку.
  • lazyLoad — функция для загрузки данных, принимает текущий узел и функцию resolve для передачи дочерних элементов.
  • leaf — указывает, является ли элемент конечным.

Пользовательские отображения

Компонент позволяет настраивать шаблон отображения выбранного значения через слот display. Например, можно добавить иконки, подсказки или форматирование текста:

<el-cascader v-model="selectedItem" :options="regionOptions">
  <template #display="{ value, selectedData }">
    <span>Вы выбрали: {{ selectedData.map(d => d.label).join(' / ') }}</span>
  </template>
</el-cascader>

События

Основные события компонента:

  • change — срабатывает при изменении значения.
  • expand-change — при раскрытии нового уровня.
  • visible-change — при открытии или закрытии выпадающего меню.
  • remove-tag — при удалении выбранного тега (для мультивыборов).

Пример обработки события change:

<el-cascader
  v-model="selectedItem"
  :options="regionOptions"
  @change="handleChange"
/>

<script>
const handleChange = (value) => {
  console.log('Выбранное значение:', value);
};
</script>

Мультивыбор

Cascader поддерживает множественный выбор через multiple и check-strictly.

  • multiple — включает возможность выбирать несколько элементов.
  • check-strictly — позволяет выбирать дочерние элементы независимо от родителя.
<el-cascader
  v-model="selectedItems"
  :options="regionOptions"
  multiple
  check-strictly
/>

Стилизация и оформление

Cascader можно стилизовать через классы и CSS-переменные:

  • el-cascader — основной контейнер.
  • el-cascader-panel — панель выбора.
  • el-cascader-node — отдельный элемент дерева.
  • el-cascader-node__label — текст узла.

Для изменения цвета или шрифта можно использовать CSS-переменные:

.el-cascader {
  --el-color-primary: #409eff;
  --el-font-size-base: 14px;
}

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

Оглавление