Cascader 级联选择器

继承el-cascader所有属性

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。

基础用法

有两种触发子菜单的方式

有禁用选项

通过在数据源中设置 disabled 字段来声明该选项是禁用的

可清空

通过 clearable 设置输入框可清空

仅显示最后一级

可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。

多选

在标签中添加 :props="props" 并设置 props = { multiple: true } 来开启多选模式。

正确用法：

<template>
  <g-cascader :props="props" />
</template>
<script lang="ts" setup>
  const props = { multiple: true }
</script>

错误用法：

<template>
  <!--  Object literal binging here is invalid syntax for cascader  -->
  <g-cascader :props="{ multiple: true }" />
</template>

选择任意一级选项

在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。 启用该功能后，可让父子节点取消关联，选择任意一级选项。

动态加载

当选中某一级时，动态加载该级下的选项。

可搜索

可以快捷地搜索选项并选择。

自定义节点内容

可以自定义备选项的节点内容

级联面板

级联面板是级联选择器的核心组件，与级联选择器一样，有单选、多选、动态加载等多种功能。

Cascader API

Cascader Attributes

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值	string / number / object string[] | number[] | any	—
options	选项的数据源， value 和 label 可以通过 CascaderProps 自定义.	object Record<string, unknown>[]	—
placeholder	输入框占位文本	string	—
disabled	是否禁用	boolean	—
clearable	是否支持清空选项	boolean	—
filterable	该选项是否可以被搜索	boolean	—

Cascader Events

事件名	说明	类型
change	当绑定值变化时触发的事件	Function (value: CascaderValue) => void

Cascader Slots

插槽名	说明	作用域
default	自定义备选项的节点内容，分别为当前节点的 Node 对象和数据	object { node: any, data: any }