Cascader 级联选择

级联选择器，支持单选和多选，可自定义分隔符。

基础用法

请选择

已选：无

基础级联选择，选中叶子节点后关闭

vue

<template>
  <div style="max-width: 300px">
    <ACascader v-model="val" :options="options" :clearable="true" />
    <p style="margin-top: 8px; font-size: 13px; color: #888">
      已选：{{ val.join(" / ") || "无" }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ACascader } from "@lite-code/aui-vue";

const val = ref<(string | number)[]>([]);
const options = [
  {
    label: "浙江",
    value: "zhejiang",
    children: [
      {
        label: "杭州",
        value: "hangzhou",
        children: [
          { label: "西湖区", value: "xihu" },
          { label: "余杭区", value: "yuhang" },
        ],
      },
      {
        label: "宁波",
        value: "ningbo",
        children: [{ label: "海曙区", value: "haishu" }],
      },
    ],
  },
  {
    label: "江苏",
    value: "jiangsu",
    children: [
      {
        label: "南京",
        value: "nanjing",
        children: [{ label: "鼓楼区", value: "gulou" }],
      },
      {
        label: "苏州",
        value: "suzhou",
        children: [{ label: "姑苏区", value: "gusu" }],
      },
    ],
  },
];
</script>

禁用状态

通过 disabled 禁用整个组件，或在 options 中设置单个节点的 disabled。

请选择

整体禁用与选项禁用

vue

<template>
  <div style="max-width: 300px">
    <ACascader :model-value="[]" :options="options" disabled />
  </div>
</template>

<script setup lang="ts">
import { ACascader } from "@lite-code/aui-vue";

const options = [
  {
    label: "浙江",
    value: "zhejiang",
    children: [
      {
        label: "杭州",
        value: "hangzhou",
        children: [{ label: "西湖区", value: "xihu" }],
      },
    ],
  },
  {
    label: "江苏",
    value: "jiangsu",
    disabled: true,
    children: [
      {
        label: "南京",
        value: "nanjing",
        children: [{ label: "鼓楼区", value: "gulou" }],
      },
    ],
  },
];
</script>

多选

设置 multiple，可以同时选择多个叶子节点，父节点支持半选。

请选择

已选：0 条

多选模式，父节点支持半选

vue

<template>
  <div style="max-width: 360px">
    <ACascader
      v-model="val"
      :options="options"
      :multiple="true"
      :clearable="true"
    />
    <p style="margin-top: 8px; font-size: 13px; color: #888">
      已选：{{ val.length }} 条
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ACascader } from "@lite-code/aui-vue";

const val = ref<(string | number)[][]>([]);
const options = [
  {
    label: "浙江",
    value: "zhejiang",
    children: [
      {
        label: "杭州",
        value: "hangzhou",
        children: [
          { label: "西湖区", value: "xihu" },
          { label: "余杭区", value: "yuhang" },
        ],
      },
      {
        label: "宁波",
        value: "ningbo",
        children: [{ label: "海曙区", value: "haishu" }],
      },
    ],
  },
  {
    label: "江苏",
    value: "jiangsu",
    children: [
      {
        label: "南京",
        value: "nanjing",
        children: [{ label: "鼓楼区", value: "gulou" }],
      },
    ],
  },
];
</script>

自定义分隔符

通过 separator 自定义路径显示的分隔符。

请选择

已选：无

自定义路径分隔符

vue

<template>
  <div style="max-width: 300px">
    <ACascader v-model="val" :options="options" separator=" > " />
    <p style="margin-top: 8px; font-size: 13px; color: #888">
      已选：{{ val.join(" > ") || "无" }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ACascader } from "@lite-code/aui-vue";

const val = ref<(string | number)[]>([]);
const options = [
  {
    label: "浙江",
    value: "zhejiang",
    children: [
      {
        label: "杭州",
        value: "hangzhou",
        children: [{ label: "西湖区", value: "xihu" }],
      },
    ],
  },
  {
    label: "江苏",
    value: "jiangsu",
    children: [
      {
        label: "南京",
        value: "nanjing",
        children: [{ label: "鼓楼区", value: "gulou" }],
      },
    ],
  },
];
</script>

API

Props

属性	类型	默认值	说明
modelValue	CascaderValue | CascaderValue[]	—	受控值，多选时为二维数组
options	CascaderOption[]	[]	选项数据
multiple	boolean	false	多选模式
maxTagCount	number	10	多选时最多显示的 Tag 数
placeholder	string	'请选择'	占位文字
disabled	boolean	false	禁用
size	'sm' | 'md' | 'lg'	'md'	尺寸
clearable	boolean	false	允许清除
separator	string	' / '	路径分隔符

Events

事件名	回调参数	说明
update:modelValue	(value: CascaderValue | CascaderValue[])	选中变更
change	(value, options)	选中变更，附带对应 option 对象

CascaderOption

属性	类型	说明
label	string	显示文字
value	string | number	值
children	CascaderOption[]	子节点
disabled	boolean	是否禁用