Cascader

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

Компонент используется в ситуациях, когда структура данных имеет родительско-дочернюю иерархию:

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

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

Основные преимущества:

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

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

Компонент импортируется из библиотеки Naive UI.

import { NCascader } from "naive-ui"

Регистрация в компоненте Vue:

export default {
  components: {
    NCascader
  }
}

В шаблоне:

<n-cascader :options="options" />

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

Cascader работает с древовидным массивом объектов.

Минимальная структура:

const options = [
  {
    label: "Россия",
    value: "ru",
    children: [
      {
        label: "Москва",
        value: "moscow"
      },
      {
        label: "Санкт-Петербург",
        value: "spb"
      }
    ]
  },
  {
    label: "Казахстан",
    value: "kz",
    children: [
      {
        label: "Алматы",
        value: "almaty"
      },
      {
        label: "Астана",
        value: "astana"
      }
    ]
  }
]

Поля объекта:

Поле Назначение
label текст отображения
value значение элемента
children дочерние элементы

Иерархия может иметь любую глубину.

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

Простейший пример Cascader:

<template>
  <n-cascader
    v-model:value="value"
    :options="options"
    placeholder="Выберите значение"
  />
</template>
import { ref } from "vue"

const value = ref(null)

const options = [
  {
    label: "Frontend",
    value: "frontend",
    children: [
      {
        label: "Vue",
        value: "vue"
      },
      {
        label: "React",
        value: "react"
      }
    ]
  },
  {
    label: "Backend",
    value: "backend",
    children: [
      {
        label: "Node.js",
        value: "node"
      },
      {
        label: "Python",
        value: "python"
      }
    ]
  }
]

После выбора значение value содержит массив выбранных уровней.

Например:

["frontend", "vue"]

Режим строгого выбора

По умолчанию выбрать можно только конечные элементы дерева. Чтобы разрешить выбор любого уровня, используется свойство check-strategy.

<n-cascader
  v-model:value="value"
  :options="options"
  check-strategy="all"
/>

Возможные режимы:

Значение Поведение
child выбираются только листья
parent выбор родительских узлов
all любой уровень

Множественный выбор

Cascader поддерживает множественный выбор элементов.

<n-cascader
  multiple
  v-model:value="values"
  :options="options"
/>

Значение становится массивом путей:

[
  ["frontend", "vue"],
  ["backend", "node"]
]

Дополнительные параметры:

Свойство Назначение
max-tag-count максимальное число отображаемых тегов
collapse-tags объединение тегов
clearable возможность очистки

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

По умолчанию отображается полный путь.

Пример:

Frontend / Vue

Можно изменить разделитель:

<n-cascader
  :options="options"
  separator=" → "
/>

Результат:

Frontend → Vue

Поиск и фильтрация

Cascader поддерживает поиск по дереву.

<n-cascader
  filterable
  :options="options"
/>

При вводе текста компонент:

  • ищет совпадения по label
  • отображает подходящие ветви
  • подсвечивает найденные элементы

Пользовательская логика фильтрации

Поведение поиска можно изменить.

<n-cascader
  filterable
  :options="options"
  :filter="filter"
/>

Функция фильтрации:

const filter = (pattern, option) => {
  return option.label
    .toLowerCase()
    .includes(pattern.toLowerCase())
}

Аргументы:

Параметр Описание
pattern введённый текст
option текущий элемент

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

Cascader поддерживает ленивую загрузку узлов.

Используется параметр load.

<n-cascader
  :options="options"
  :load="loadChildren"
/>

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

const loadChildren = (option) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      option.children = [
        {
          label: "Подкатегория 1",
          value: "sub1"
        },
        {
          label: "Подкатегория 2",
          value: "sub2"
        }
      ]

      resolve()
    }, 1000)
  })
}

Поведение:

  1. пользователь выбирает узел
  2. вызывается функция load
  3. загружаются дочерние элементы
  4. интерфейс автоматически обновляется

Управление состоянием раскрытия

Некоторые ветви дерева могут быть раскрыты программно.

<n-cascader
  :options="options"
  :default-expanded-keys="['frontend']"
/>

Используется для:

  • предварительного раскрытия разделов
  • улучшения UX при большом дереве

Кастомизация структуры данных

Если структура данных отличается от стандартной (label, value, children), используется параметр field-names.

<n-cascader
  :options="options"
  :field-names="fieldNames"
/>

Настройка:

const fieldNames = {
  label: "name",
  value: "id",
  children: "items"
}

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

{
  name: "Frontend",
  id: 1,
  items: [...]
}

Управление отображением опций

Cascader поддерживает кастомные рендеры элементов.

<n-cascader
  :options="options"
  :render-label="renderLabel"
/>

Функция:

const renderLabel = (option) => {
  return h("span", null, option.label)
}

Это позволяет:

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

Ограничение глубины выбора

Можно ограничить глубину дерева.

Пример структуры:

Категория
 ├ Подкатегория
 │   └ Товар

Если необходимо разрешить выбор только второго уровня, используется логика проверки:

const disabled = (option) => {
  return option.level !== 2
}

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

Cascader генерирует ряд событий.

update:value

Вызывается при изменении значения.

<n-cascader
  :options="options"
  @update:value="handleChange"
/>
const handleChange = (value) => {
  console.log(value)
}

expand

Срабатывает при раскрытии узла.

<n-cascader @expand="handleExpand" />

load

Срабатывает при асинхронной загрузке.

Очистка значения

Очистка активируется параметром:

<n-cascader
  clearable
  :options="options"
/>

Кнопка очистки появляется при наведении.

Размеры компонента

Cascader поддерживает стандартные размеры Naive UI.

<n-cascader size="small" />
<n-cascader size="medium" />
<n-cascader size="large" />

Состояние загрузки

Отображение состояния загрузки:

<n-cascader
  loading
  :options="options"
/>

Используется при:

  • асинхронной загрузке
  • ожидании ответа сервера

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

Полное отключение:

<n-cascader
  disabled
  :options="options"
/>

Также можно отключить отдельные элементы.

{
  label: "React",
  value: "react",
  disabled: true
}

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

Можно изменить отображение выбранных элементов.

<n-cascader
  :display-render="displayRender"
/>

Функция:

const displayRender = ({ labels }) => {
  return labels.join(" / ")
}

Оптимизация для больших деревьев

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

1. Использовать ленивую загрузку

load()

2. Ограничивать глубину дерева

3. Использовать фильтрацию

filterable

4. Избегать слишком большого количества элементов на одном уровне

Типовые сценарии применения

Географический выбор

Страна
 └ Регион
    └ Город

Каталог товаров

Категория
 └ Подкатегория
    └ Товар

Организационная структура

Компания
 └ Отдел
    └ Сотрудник

Основные свойства Cascader

Свойство Назначение
options данные дерева
value выбранное значение
multiple множественный выбор
filterable поиск
clearable очистка
disabled отключение
separator разделитель пути
load асинхронная загрузка
field-names кастомные названия полей
render-label кастомный рендер
display-render кастомное отображение значения
check-strategy стратегия выбора
size размер компонента

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

Cascader в Naive UI реализован как комбинация нескольких компонентов:

  • dropdown
  • tree navigation
  • select input

Это обеспечивает:

  • высокую производительность
  • гибкость конфигурации
  • поддержку сложных сценариев выбора

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

Оглавление