## 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. :::demo Assigning the `options` attribute to an array of options renders a Cascader. The `expand-trigger` attribute defines how child options are expanded. This example also demonstrates the `change` event, whose parameter is the value of Cascader, an array made up of the values of each selected level. ```html
Child options expand when clicked (default)
Child options expand when hovered
``` ::: ### Disabled option Disable an option by setting a `disabled` field in the option object. :::demo In this example, the first item in `options` array has a `disabled: true` field, so it is disabled. By default, Cascader checks the `disabled` field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the `props` attribute (see the API table below for details). And of course, field name `value`, `label` and `children` can also be customized in the same way. ```html ``` ::: ### Display only the last level The input can display only the last level instead of all levels. :::demo The `show-all-levels` attribute defines if all levels are displayed. If it is `false`, only the last level is displayed. ```html ``` ::: ### With default value :::demo The default value can be defined with an array. ```html ``` ::: ### Change on select Parent options can also be selected. :::demo By default only the options in the last level can be selected. By assigning `change-on-select` to `true`, options in parent levels can also be selected. ```html ``` ::: ### Dynamically load child options Load child options when their parent option is clicked or hovered over. :::demo In this example, the options array does not have data of cities when initialized. With the `active-item-change` event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how `props` is used. ```html ``` ::: ### Filterable Search and select options with a keyword. :::demo Adding `filterable` to `el-cascader` enables filtering ```html
Only options of the last level can be selected
Options of all levels can be selected
``` ::: ### Attributes | Attribute | Description | Type | Options | Default| |---------- |-------------------- |---------|------------- |-------- | | value / v-model | binding value | array | — | — | | options | data of the options | array | — | — | | props | configuration options, see the following table | object | — | — | | separator | option separator | string | — | / | | popper-class | custom class name for Cascader's dropdown | string | — | — | | placeholder | input placeholder | string | — | Select | | disabled | whether Cascader is disabled | boolean | — | false | | clearable | whether selected value can be cleared | boolean | — | false | | expand-trigger | trigger mode of expanding current item | string | click / hover | click | | show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true | | filterable | whether the options can be searched | boolean | — | — | | debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 | | change-on-select | whether selecting an option of any level is permitted | boolean | — | false | | size | size of Input | string | medium / small / mini | — | | before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — | ### props | Attribute | Description | Type | Accepted Values | Default | | --------- | ----------------- | ------ | ------ | ------ | | label | specify which key of option object is used as the option's label | string | — | — | | value | specify which key of option object is used as the option's value | string | — | — | | children | specify which key of option object is used as the option's child options | string | — | — | | disabled | specify which key of option object indicates if the option is disabled | string | — | — | ### Events | Event Name | Description | Parameters | |---------- |-------- |---------- | | change | triggers when the binding value changes | value | | active-item-change | triggers when active option of its parent changes, only works when `change-on-select` is `false` | an array of active options | | blur | triggers when Cascader blurs | (event: Event) | | focus | triggers when Cascader focuses | (event: Event) | | visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |