n-cascader

Select and manage hierarchical data in Vue 3 with a cascader component.

8|3|Updated Mar 13, 2026
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-cascader
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: n-cascader
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-cascader
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-cascader

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Selecting from hierarchical data can be tedious and error-prone when navigating multi-level options and managing selections across levels.

Core Features & Use Cases

  • Supports single and multiple selection, async loading, filtering, and various check strategies for flexible selection behavior.
  • Suitable for region/category navigation, multi-level menus, and dynamic data with remote loading and path display.
  • Works smoothly in Vue 3 applications using Naive UI, with virtual scrolling for large datasets.

Quick Start

Instantiate n-cascader with a sample options array and bind v-model:value to capture the selected values.

Frequently Asked Questions about n-cascader

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement a cascader for hierarchical selection in Vue 3?▼

A cascader for hierarchical selection in Vue 3 efficiently manages single and multiple selections across nested menus. It supports customizable field names and path display to navigate multi-level options smoothly.

Can I use async loading for dynamic data in a Vue 3 cascader component?▼

Yes, async loading is supported for dynamic remote data in a Vue 3 cascader component. It requires on-load callbacks to fetch remote data dynamically, ensuring smooth navigation of multi-level options.

Does the Naive UI cascader support virtual scrolling for large datasets?▼

The Naive UI cascader supports virtual scrolling to handle large datasets efficiently. This feature ensures smooth rendering and navigation performance when dealing with extensive hierarchical tree-structure options.

What is the best way to filter tree-structure options during multi-select?▼

Filtering tree-structure options during multi-select is best handled using built-in search functionality within the cascader. This allows users to quickly locate and manage specific items across deeply nested hierarchical levels.

How does a cascader component handle path display for selected nested menus?▼

A cascader component handles path display by tracking the full hierarchy of selected nested menus. This visually maps the exact route taken through the tree-structure, clarifying multi-level selections for the user.