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.