级联选择 Cascade Select

#基础用法

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>

#属性

#CascadeSelect

CascadeSelect：级联选择器。选择一个分支后，下一列在其旁边淡入展开，直到点击叶节点确定整条路径。modelValue 是选中的路径；开启 multiple 时是路径数组，拼接好的标签显示在触发器上。highlightTrigger: "hover" 会切换为经典级联菜单，悬停即可展开。filterable 在查询期间把多列结构换成平铺的匹配路径列表，每条结果仍显示完整路径。

属性	类型	默认值	描述
`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"`	触发器高度，可为 `sm`、`md` 或 `lg`