Cascader #

If the options have a clear hierarchical structure, Cascader can be used to view and select them.

Basic usage #

There are two ways to expand child option items.

Disabled option #

Disable an option by setting a disabled field in the option object.

Clearable #

Set clearable attribute for el-cascader and a clear icon will appear when selected and hovered

Display only the last level #

The input can display only the last level instead of all levels.

Multiple Selection #

Add :props="props" in tag and set data props = { multiple: true } to use multiple selection.

Do:

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

Don't do:

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

Select any level of options #

In single selection, only the leaf nodes can be checked, and in multiple selection, check parent nodes will lead to leaf nodes be checked eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.

Dynamic loading #

Dynamic load its child nodes when checked a node.

Filterable #

Search and select options with a keyword.

Custom option content #

You can customize the content of cascader node.

Cascader panel #

CascaderPanel is the core component of Cascader which has various of features such as single selection, multiple selection, dynamic loading and so on.

Cascader Attributes #

Cascader Events #

Cascader Methods #

Cascader Slots #

CascaderPanel Attributes #

CascaderPanel Events #

CascaderPanel Methods #

CascaderPanel Slots #

Props #