Cascader 级联选择器 #

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

基础用法 #

有两种触发子菜单的方式

有禁用选项 #

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

可清空 #

通过 clearable 设置输入框可清空

仅显示最后一级 #

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

多选 #

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

正确用法：

<template>
  <el-cascader :props="props" />
</template>
<script lang="ts">
  export default {
    setup() {
      return {
        props: {
          // props.
          multiple: true,
        },
      }
    },
  }
</script>

错误用法：

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

选择任意一级选项 #

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

动态加载 #

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

可搜索 #

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

自定义节点内容 #

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

级联面板 #

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

Cascader 属性 #

Cascader 事件 #

Cascader 方法 #

Cascader 插槽 #

CascaderPanel 属性 #

CascaderPanel 事件 #

CascaderPanel 方法 #

CascaderPanel 插槽 #

Props #