Cascade Select

#Basic usage

cascade-select/basic Vue React

cascade-select/basic.vue

<script setup lang="ts">
import { CascadeSelect, type CascadeSelectNode } from "@bysages/vue";
import { ref } from "vue";

const data: CascadeSelectNode[] = [
  {
    label: "广东省",
    value: "gd",
    children: [
      {
        label: "广州市",
        value: "gz",
        children: [
          { label: "越秀区", value: "yuexiu" },
          { label: "天河区", value: "tianhe" },
        ],
      },
      {
        label: "深圳市",
        value: "sz",
        children: [
          { label: "福田区", value: "futian" },
          { label: "南山区", value: "nanshan" },
        ],
      },
    ],
  },
  {
    label: "浙江省",
    value: "zj",
    children: [
      {
        label: "杭州市",
        value: "hz",
        children: [{ label: "西湖区", value: "xihu" }],
      },
    ],
  },
];

const path = ref();
</script>

<template>
  <CascadeSelect v-model="path" :data="data" placeholder="选择省 / 市 / 区" class="w-full" />
</template>

cascade-select/filterable Vue React

cascade-select/filterable.vue

<script setup lang="ts">
import { CascadeSelect, type CascadeSelectNode } from "@bysages/vue";
import { ref } from "vue";

const data: CascadeSelectNode[] = [
  {
    label: "广东省",
    value: "gd",
    children: [
      {
        label: "广州市",
        value: "gz",
        children: [
          { label: "越秀区", value: "yuexiu" },
          { label: "天河区", value: "tianhe" },
        ],
      },
      {
        label: "深圳市",
        value: "sz",
        children: [
          { label: "福田区", value: "futian" },
          { label: "南山区", value: "nanshan" },
        ],
      },
    ],
  },
  {
    label: "浙江省",
    value: "zj",
    children: [
      {
        label: "杭州市",
        value: "hz",
        children: [{ label: "西湖区", value: "xihu" }],
      },
    ],
  },
];

const path = ref();
</script>

<template>
  <CascadeSelect
    v-model="path"
    :data="data"
    filterable
    placeholder="选择省 / 市 / 区"
    class="w-full"
  />
</template>

#Props

#CascadeSelect

A corridor of linked columns: pick a branch and the next column dissolves open beside it, until a leaf click settles the whole path. modelValue is the selected path (or paths, when multiple) — the joined labels ride the trigger. highlightTrigger: "hover" turns the classic cascading menu: pointing is enough to unfold. filterable swaps the corridor for a flat list of matching paths while a query runs — each hit still reads as its full route.

Prop	Type	Default	Description
`modelValue`	`Array as PropType<string[][]>`	`undefined`	—
`data`	`Array as PropType<CascadeSelectNode[]>`		—
`placeholder`	`String`	`"Select…"`	—
`highlightTrigger`	`String as PropType<"click" \| "hover">`	`undefined`	—
`filterable`	`Boolean`	`false`	—
`multiple`	`Boolean`	`false`	—
`disabled`	`Boolean`	`false`	—
`invalid`	`Boolean`	`false`	—
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the trigger.