2017-01-22 11:32:05 +08:00
## Cascader
2017-02-19 00:50:55 +08:00
If the options have a clear hierarchical structure, Cascader can be used to view and select them.
2017-01-22 11:32:05 +08:00
### Basic usage
2017-02-19 00:50:55 +08:00
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.
2017-01-22 11:32:05 +08:00
```html
2017-02-19 00:50:55 +08:00
< div class = "block" >
< span class = "demonstration" > Child options expand when clicked (default)< / span >
< el-cascader
:options="options"
v-model="selectedOptions"
@change ="handleChange">
< / el-cascader >
< / div >
< div class = "block" >
< span class = "demonstration" > Child options expand when hovered< / span >
< el-cascader
expand-trigger="hover"
:options="options"
v-model="selectedOptions2"
@change ="handleChange">
< / el-cascader >
< / div >
2017-01-22 11:32:05 +08:00
< script >
2017-02-19 00:50:55 +08:00
export default {
2017-01-22 11:32:05 +08:00
data() {
return {
options: [{
2017-02-19 00:50:55 +08:00
value: 'guide',
label: 'Guide',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'disciplines',
label: 'Disciplines',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'consistency',
label: 'Consistency'
}, {
value: 'feedback',
label: 'Feedback'
}, {
value: 'efficiency',
label: 'Efficiency'
}, {
value: 'controllability',
label: 'Controllability'
}]
2017-01-22 11:32:05 +08:00
}, {
2017-02-19 00:50:55 +08:00
value: 'navigation',
label: 'Navigation',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'side nav',
label: 'Side Navigation'
}, {
value: 'top nav',
label: 'Top Navigation'
}]
}]
2017-01-22 11:32:05 +08:00
}, {
2017-02-19 00:50:55 +08:00
value: 'component',
label: 'Component',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'basic',
label: 'Basic',
children: [{
value: 'layout',
label: 'Layout'
}, {
value: 'color',
label: 'Color'
}, {
value: 'typography',
label: 'Typography'
}, {
value: 'icon',
label: 'Icon'
}, {
value: 'button',
label: 'Button'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio'
}, {
value: 'checkbox',
label: 'Checkbox'
}, {
value: 'input',
label: 'Input'
}, {
value: 'input-number',
label: 'InputNumber'
}, {
value: 'select',
label: 'Select'
}, {
value: 'cascader',
label: 'Cascader'
}, {
value: 'switch',
label: 'Switch'
}, {
value: 'slider',
label: 'Slider'
}, {
value: 'time-picker',
label: 'TimePicker'
}, {
value: 'date-picker',
label: 'DatePicker'
}, {
value: 'datetime-picker',
label: 'DateTimePicker'
}, {
value: 'upload',
label: 'Upload'
}, {
value: 'rate',
label: 'Rate'
}, {
value: 'form',
label: 'Form'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table'
}, {
value: 'tag',
label: 'Tag'
}, {
value: 'progress',
label: 'Progress'
}, {
value: 'tree',
label: 'Tree'
}, {
value: 'pagination',
label: 'Pagination'
}, {
value: 'badge',
label: 'Badge'
}]
}, {
value: 'notice',
label: 'Notice',
children: [{
value: 'alert',
label: 'Alert'
}, {
value: 'loading',
label: 'Loading'
}, {
value: 'message',
label: 'Message'
}, {
value: 'message-box',
label: 'MessageBox'
}, {
value: 'notification',
label: 'Notification'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu'
}, {
value: 'tabs',
label: 'Tabs'
}, {
value: 'breadcrumb',
label: 'Breadcrumb'
}, {
value: 'dropdown',
label: 'Dropdown'
}, {
value: 'steps',
label: 'Steps'
}]
}, {
value: 'others',
label: 'Others',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'dialog',
label: 'Dialog'
}, {
value: 'tooltip',
label: 'Tooltip'
}, {
value: 'popover',
label: 'Popover'
}, {
value: 'card',
label: 'Card'
}, {
value: 'carousel',
label: 'Carousel'
}, {
value: 'collapse',
label: 'Collapse'
}]
}]
}, {
value: 'resource',
label: 'Resource',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'docs',
label: 'Design Documentation'
}]
2017-01-22 11:32:05 +08:00
}],
2017-02-24 17:37:06 +08:00
selectedOptions: [],
selectedOptions2: []
2017-01-22 11:32:05 +08:00
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
< / script >
```
:::
### Disabled option
2017-02-19 00:50:55 +08:00
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.
2017-01-22 11:32:05 +08:00
```html
< el-cascader
:options="optionsWithDisabled"
>< / el-cascader >
< script >
2017-02-19 00:50:55 +08:00
export default {
2017-01-22 11:32:05 +08:00
data() {
return {
optionsWithDisabled: [{
2017-02-19 00:50:55 +08:00
value: 'guide',
label: 'Guide',
2017-01-22 11:32:05 +08:00
disabled: true,
children: [{
2017-02-19 00:50:55 +08:00
value: 'disciplines',
label: 'Disciplines',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'consistency',
label: 'Consistency'
}, {
value: 'feedback',
label: 'Feedback'
}, {
value: 'efficiency',
label: 'Efficiency'
}, {
value: 'controllability',
label: 'Controllability'
}]
2017-01-22 11:32:05 +08:00
}, {
2017-02-19 00:50:55 +08:00
value: 'navigation',
label: 'Navigation',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'side nav',
label: 'Side Navigation'
}, {
value: 'top nav',
label: 'Top Navigation'
}]
}]
2017-01-22 11:32:05 +08:00
}, {
2017-02-19 00:50:55 +08:00
value: 'component',
label: 'Component',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'basic',
label: 'Basic',
children: [{
value: 'layout',
label: 'Layout'
}, {
value: 'color',
label: 'Color'
}, {
value: 'typography',
label: 'Typography'
}, {
value: 'icon',
label: 'Icon'
}, {
value: 'button',
label: 'Button'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio'
}, {
value: 'checkbox',
label: 'Checkbox'
}, {
value: 'input',
label: 'Input'
}, {
value: 'input-number',
label: 'InputNumber'
}, {
value: 'select',
label: 'Select'
}, {
value: 'cascader',
label: 'Cascader'
}, {
value: 'switch',
label: 'Switch'
}, {
value: 'slider',
label: 'Slider'
}, {
value: 'time-picker',
label: 'TimePicker'
}, {
value: 'date-picker',
label: 'DatePicker'
}, {
value: 'datetime-picker',
label: 'DateTimePicker'
}, {
value: 'upload',
label: 'Upload'
}, {
value: 'rate',
label: 'Rate'
}, {
value: 'form',
label: 'Form'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table'
}, {
value: 'tag',
label: 'Tag'
}, {
value: 'progress',
label: 'Progress'
}, {
value: 'tree',
label: 'Tree'
}, {
value: 'pagination',
label: 'Pagination'
}, {
value: 'badge',
label: 'Badge'
}]
}, {
value: 'notice',
label: 'Notice',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'alert',
label: 'Alert'
}, {
value: 'loading',
label: 'Loading'
}, {
value: 'message',
label: 'Message'
}, {
value: 'message-box',
label: 'MessageBox'
}, {
value: 'notification',
label: 'Notification'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu'
}, {
value: 'tabs',
label: 'Tabs'
}, {
value: 'breadcrumb',
label: 'Breadcrumb'
}, {
value: 'dropdown',
label: 'Dropdown'
}, {
value: 'steps',
label: 'Steps'
}]
}, {
value: 'others',
label: 'Others',
children: [{
value: 'dialog',
label: 'Dialog'
}, {
value: 'tooltip',
label: 'Tooltip'
}, {
value: 'popover',
label: 'Popover'
}, {
value: 'card',
label: 'Card'
}, {
value: 'carousel',
label: 'Carousel'
}, {
value: 'collapse',
label: 'Collapse'
}]
}]
}, {
value: 'resource',
label: 'Resource',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'docs',
label: 'Design Documentation'
}]
2017-01-22 11:32:05 +08:00
}]
};
}
};
< / script >
```
:::
2017-02-19 00:50:55 +08:00
### Display only the last level
2017-01-22 11:32:05 +08:00
2017-02-19 00:50:55 +08:00
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.
2017-01-22 11:32:05 +08:00
```html
< el-cascader
2017-02-19 00:50:55 +08:00
:options="options"
:show-all-levels="false"
2017-01-22 11:32:05 +08:00
>< / el-cascader >
< script >
2017-02-19 00:50:55 +08:00
export default {
2017-01-22 11:32:05 +08:00
data() {
return {
options: [{
2017-02-19 00:50:55 +08:00
value: 'guide',
label: 'Guide',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'disciplines',
label: 'Disciplines',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'consistency',
label: 'Consistency'
}, {
value: 'feedback',
label: 'Feedback'
}, {
value: 'efficiency',
label: 'Efficiency'
}, {
value: 'controllability',
label: 'Controllability'
}]
2017-01-22 11:32:05 +08:00
}, {
2017-02-19 00:50:55 +08:00
value: 'navigation',
label: 'Navigation',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'side nav',
label: 'Side Navigation'
}, {
value: 'top nav',
label: 'Top Navigation'
}]
}]
2017-01-22 11:32:05 +08:00
}, {
2017-02-19 00:50:55 +08:00
value: 'component',
label: 'Component',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'basic',
label: 'Basic',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'layout',
label: 'Layout'
}, {
value: 'color',
label: 'Color'
}, {
value: 'typography',
label: 'Typography'
}, {
value: 'icon',
label: 'Icon'
}, {
value: 'button',
label: 'Button'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio'
}, {
value: 'checkbox',
label: 'Checkbox'
}, {
value: 'input',
label: 'Input'
}, {
value: 'input-number',
label: 'InputNumber'
}, {
value: 'select',
label: 'Select'
}, {
value: 'cascader',
label: 'Cascader'
}, {
value: 'switch',
label: 'Switch'
}, {
value: 'slider',
label: 'Slider'
}, {
value: 'time-picker',
label: 'TimePicker'
}, {
value: 'date-picker',
label: 'DatePicker'
}, {
value: 'datetime-picker',
label: 'DateTimePicker'
}, {
value: 'upload',
label: 'Upload'
}, {
value: 'rate',
label: 'Rate'
}, {
value: 'form',
label: 'Form'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table'
}, {
value: 'tag',
label: 'Tag'
}, {
value: 'progress',
label: 'Progress'
}, {
value: 'tree',
label: 'Tree'
}, {
value: 'pagination',
label: 'Pagination'
}, {
value: 'badge',
label: 'Badge'
}]
}, {
value: 'notice',
label: 'Notice',
children: [{
value: 'alert',
label: 'Alert'
}, {
value: 'loading',
label: 'Loading'
}, {
value: 'message',
label: 'Message'
}, {
value: 'message-box',
label: 'MessageBox'
}, {
value: 'notification',
label: 'Notification'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu'
}, {
value: 'tabs',
label: 'Tabs'
}, {
value: 'breadcrumb',
label: 'Breadcrumb'
}, {
value: 'dropdown',
label: 'Dropdown'
}, {
value: 'steps',
label: 'Steps'
}]
}, {
value: 'others',
label: 'Others',
children: [{
value: 'dialog',
label: 'Dialog'
}, {
value: 'tooltip',
label: 'Tooltip'
}, {
value: 'popover',
label: 'Popover'
}, {
value: 'card',
label: 'Card'
}, {
value: 'carousel',
label: 'Carousel'
}, {
value: 'collapse',
label: 'Collapse'
}]
}]
}, {
value: 'resource',
label: 'Resource',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'docs',
label: 'Design Documentation'
}]
}]
2017-01-22 11:32:05 +08:00
};
}
};
< / script >
```
:::
2017-02-19 00:50:55 +08:00
### With default value
2017-01-22 11:32:05 +08:00
2017-02-19 00:50:55 +08:00
:::demo The default value can be defined with an array.
2017-01-22 11:32:05 +08:00
```html
2017-02-19 00:50:55 +08:00
< el-cascader
:options="options"
2019-04-15 14:05:00 +08:00
v-model="selectedOptions"
2017-02-19 00:50:55 +08:00
>< / el-cascader >
2017-01-22 11:32:05 +08:00
< script >
2017-02-19 00:50:55 +08:00
export default {
2017-01-22 11:32:05 +08:00
data() {
return {
options: [{
2017-02-19 00:50:55 +08:00
value: 'guide',
label: 'Guide',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'disciplines',
label: 'Disciplines',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'consistency',
label: 'Consistency'
}, {
value: 'feedback',
label: 'Feedback'
}, {
value: 'efficiency',
label: 'Efficiency'
}, {
value: 'controllability',
label: 'Controllability'
}]
2017-01-22 11:32:05 +08:00
}, {
2017-02-19 00:50:55 +08:00
value: 'navigation',
label: 'Navigation',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'side nav',
label: 'Side Navigation'
}, {
value: 'top nav',
label: 'Top Navigation'
}]
}]
2017-01-22 11:32:05 +08:00
}, {
2017-02-19 00:50:55 +08:00
value: 'component',
label: 'Component',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'basic',
label: 'Basic',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'layout',
label: 'Layout'
}, {
value: 'color',
label: 'Color'
}, {
value: 'typography',
label: 'Typography'
}, {
value: 'icon',
label: 'Icon'
}, {
value: 'button',
label: 'Button'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio'
}, {
value: 'checkbox',
label: 'Checkbox'
}, {
value: 'input',
label: 'Input'
}, {
value: 'input-number',
label: 'InputNumber'
}, {
value: 'select',
label: 'Select'
}, {
value: 'cascader',
label: 'Cascader'
}, {
value: 'switch',
label: 'Switch'
}, {
value: 'slider',
label: 'Slider'
}, {
value: 'time-picker',
label: 'TimePicker'
}, {
value: 'date-picker',
label: 'DatePicker'
}, {
value: 'datetime-picker',
label: 'DateTimePicker'
}, {
value: 'upload',
label: 'Upload'
}, {
value: 'rate',
label: 'Rate'
}, {
value: 'form',
label: 'Form'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table'
}, {
value: 'tag',
label: 'Tag'
}, {
value: 'progress',
label: 'Progress'
}, {
value: 'tree',
label: 'Tree'
}, {
value: 'pagination',
label: 'Pagination'
}, {
value: 'badge',
label: 'Badge'
}]
}, {
value: 'notice',
label: 'Notice',
children: [{
value: 'alert',
label: 'Alert'
}, {
value: 'loading',
label: 'Loading'
}, {
value: 'message',
label: 'Message'
}, {
value: 'message-box',
label: 'MessageBox'
}, {
value: 'notification',
label: 'Notification'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu'
}, {
value: 'tabs',
label: 'Tabs'
}, {
value: 'breadcrumb',
label: 'Breadcrumb'
}, {
value: 'dropdown',
label: 'Dropdown'
}, {
value: 'steps',
label: 'Steps'
}]
}, {
value: 'others',
label: 'Others',
children: [{
value: 'dialog',
label: 'Dialog'
}, {
value: 'tooltip',
label: 'Tooltip'
}, {
value: 'popover',
label: 'Popover'
}, {
value: 'card',
label: 'Card'
}, {
value: 'carousel',
label: 'Carousel'
}, {
value: 'collapse',
label: 'Collapse'
}]
}]
}, {
value: 'resource',
label: 'Resource',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'docs',
label: 'Design Documentation'
}]
}],
2019-04-15 14:05:00 +08:00
selectedOptions: ['component', 'data', 'tag']
2017-01-22 11:32:05 +08:00
};
}
};
< / script >
```
:::
2017-02-19 00:50:55 +08:00
### Change on select
2017-01-22 11:32:05 +08:00
2017-02-19 00:50:55 +08:00
Parent options can also be selected.
2017-01-22 11:32:05 +08:00
2017-02-19 00:50:55 +08:00
:::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.
2017-01-22 11:32:05 +08:00
```html
< el-cascader
:options="options"
2017-02-19 00:50:55 +08:00
change-on-select
2017-01-22 11:32:05 +08:00
>< / el-cascader >
< script >
2017-02-19 00:50:55 +08:00
export default {
2017-01-22 11:32:05 +08:00
data() {
return {
options: [{
2017-02-19 00:50:55 +08:00
value: 'guide',
label: 'Guide',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'disciplines',
label: 'Disciplines',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'consistency',
label: 'Consistency'
}, {
value: 'feedback',
label: 'Feedback'
}, {
value: 'efficiency',
label: 'Efficiency'
}, {
value: 'controllability',
label: 'Controllability'
}]
2017-01-22 11:32:05 +08:00
}, {
2017-02-19 00:50:55 +08:00
value: 'navigation',
label: 'Navigation',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'side nav',
label: 'Side Navigation'
}, {
value: 'top nav',
label: 'Top Navigation'
}]
}]
2017-01-22 11:32:05 +08:00
}, {
2017-02-19 00:50:55 +08:00
value: 'component',
label: 'Component',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'basic',
label: 'Basic',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'layout',
label: 'Layout'
}, {
value: 'color',
label: 'Color'
}, {
value: 'typography',
label: 'Typography'
}, {
value: 'icon',
label: 'Icon'
}, {
value: 'button',
label: 'Button'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio'
}, {
value: 'checkbox',
label: 'Checkbox'
}, {
value: 'input',
label: 'Input'
}, {
value: 'input-number',
label: 'InputNumber'
}, {
value: 'select',
label: 'Select'
}, {
value: 'cascader',
label: 'Cascader'
}, {
value: 'switch',
label: 'Switch'
}, {
value: 'slider',
label: 'Slider'
}, {
value: 'time-picker',
label: 'TimePicker'
}, {
value: 'date-picker',
label: 'DatePicker'
}, {
value: 'datetime-picker',
label: 'DateTimePicker'
}, {
value: 'upload',
label: 'Upload'
}, {
value: 'rate',
label: 'Rate'
}, {
value: 'form',
label: 'Form'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table'
}, {
value: 'tag',
label: 'Tag'
}, {
value: 'progress',
label: 'Progress'
}, {
value: 'tree',
label: 'Tree'
}, {
value: 'pagination',
label: 'Pagination'
}, {
value: 'badge',
label: 'Badge'
}]
}, {
value: 'notice',
label: 'Notice',
children: [{
value: 'alert',
label: 'Alert'
}, {
value: 'loading',
label: 'Loading'
}, {
value: 'message',
label: 'Message'
}, {
value: 'message-box',
label: 'MessageBox'
}, {
value: 'notification',
label: 'Notification'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu'
}, {
value: 'tabs',
label: 'Tabs'
}, {
value: 'breadcrumb',
label: 'Breadcrumb'
}, {
value: 'dropdown',
label: 'Dropdown'
}, {
value: 'steps',
label: 'Steps'
}]
}, {
value: 'others',
label: 'Others',
children: [{
value: 'dialog',
label: 'Dialog'
}, {
value: 'tooltip',
label: 'Tooltip'
}, {
value: 'popover',
label: 'Popover'
}, {
value: 'card',
label: 'Card'
}, {
value: 'carousel',
label: 'Carousel'
}, {
value: 'collapse',
label: 'Collapse'
}]
}]
}, {
value: 'resource',
label: 'Resource',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'docs',
label: 'Design Documentation'
}]
2017-01-22 11:32:05 +08:00
}]
};
}
};
< / script >
```
:::
2017-02-19 00:50:55 +08:00
### Dynamically load child options
2017-01-22 11:32:05 +08:00
2017-02-19 00:50:55 +08:00
Load child options when their parent option is clicked or hovered over.
2017-01-22 11:32:05 +08:00
2017-02-19 00:50:55 +08:00
:::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.
2017-01-22 11:32:05 +08:00
```html
< el-cascader
2019-04-15 14:05:00 +08:00
:options="options"
2017-02-19 00:50:55 +08:00
@active -item-change="handleItemChange"
:props="props"
2017-01-22 11:32:05 +08:00
>< / el-cascader >
2017-02-19 00:50:55 +08:00
2017-01-22 11:32:05 +08:00
< script >
2017-02-19 00:50:55 +08:00
export default {
2017-01-22 11:32:05 +08:00
data() {
return {
2019-04-15 14:05:00 +08:00
options: [{
2017-02-19 00:50:55 +08:00
label: 'California',
cities: []
2017-01-22 11:32:05 +08:00
}, {
2017-02-19 00:50:55 +08:00
label: 'Florida',
cities: []
}],
props: {
value: 'label',
children: 'cities'
}
2017-01-22 11:32:05 +08:00
};
2017-02-19 00:50:55 +08:00
},
2017-05-09 18:16:15 +08:00
2017-02-19 00:50:55 +08:00
methods: {
handleItemChange(val) {
console.log('active item:', val);
setTimeout(_ => {
2019-05-07 12:02:38 +08:00
if (val.indexOf('California') > -1 & & !this.options[0].cities.length) {
this.options[0].cities = [{
2017-02-19 00:50:55 +08:00
label: 'Los Angeles'
}];
2019-05-07 12:02:38 +08:00
} else if (val.indexOf('Florida') > -1 & & !this.options[1].cities.length) {
this.options[1].cities = [{
2017-02-19 00:50:55 +08:00
label: 'Orlando'
}];
}
}, 300);
}
2017-01-22 11:32:05 +08:00
}
};
< / script >
```
:::
2017-02-19 00:50:55 +08:00
### Filterable
2017-01-22 11:32:05 +08:00
2017-02-19 00:50:55 +08:00
Search and select options with a keyword.
2017-01-22 11:32:05 +08:00
2017-02-19 00:50:55 +08:00
:::demo Adding `filterable` to `el-cascader` enables filtering
2017-01-22 11:32:05 +08:00
```html
2017-02-19 00:50:55 +08:00
< div class = "block" >
< span class = "demonstration" > Only options of the last level can be selected< / span >
< el-cascader
placeholder="Try searching: Guide"
:options="options"
filterable
>< / el-cascader >
< / div >
< div class = "block" >
< span class = "demonstration" > Options of all levels can be selected< / span >
< el-cascader
placeholder="Try searching: Guide"
:options="options"
filterable
change-on-select
>< / el-cascader >
< / div >
2017-01-22 11:32:05 +08:00
< script >
2017-02-19 00:50:55 +08:00
export default {
2017-01-22 11:32:05 +08:00
data() {
return {
options: [{
2017-02-19 00:50:55 +08:00
value: 'guide',
label: 'Guide',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'disciplines',
label: 'Disciplines',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'consistency',
label: 'Consistency'
}, {
value: 'feedback',
label: 'Feedback'
}, {
value: 'efficiency',
label: 'Efficiency'
}, {
value: 'controllability',
label: 'Controllability'
}]
2017-01-22 11:32:05 +08:00
}, {
2017-02-19 00:50:55 +08:00
value: 'navigation',
label: 'Navigation',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'side nav',
label: 'Side Navigation'
}, {
value: 'top nav',
label: 'Top Navigation'
}]
}]
2017-01-22 11:32:05 +08:00
}, {
2017-02-19 00:50:55 +08:00
value: 'component',
label: 'Component',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'basic',
label: 'Basic',
2017-01-22 11:32:05 +08:00
children: [{
2017-02-19 00:50:55 +08:00
value: 'layout',
label: 'Layout'
}, {
value: 'color',
label: 'Color'
}, {
value: 'typography',
label: 'Typography'
}, {
value: 'icon',
label: 'Icon'
}, {
value: 'button',
label: 'Button'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio'
}, {
value: 'checkbox',
label: 'Checkbox'
}, {
value: 'input',
label: 'Input'
}, {
value: 'input-number',
label: 'InputNumber'
}, {
value: 'select',
label: 'Select'
}, {
value: 'cascader',
label: 'Cascader'
}, {
value: 'switch',
label: 'Switch'
}, {
value: 'slider',
label: 'Slider'
}, {
value: 'time-picker',
label: 'TimePicker'
}, {
value: 'date-picker',
label: 'DatePicker'
}, {
value: 'datetime-picker',
label: 'DateTimePicker'
}, {
value: 'upload',
label: 'Upload'
}, {
value: 'rate',
label: 'Rate'
}, {
value: 'form',
label: 'Form'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table'
}, {
value: 'tag',
label: 'Tag'
}, {
value: 'progress',
label: 'Progress'
}, {
value: 'tree',
label: 'Tree'
}, {
value: 'pagination',
label: 'Pagination'
}, {
value: 'badge',
label: 'Badge'
}]
}, {
value: 'notice',
label: 'Notice',
children: [{
value: 'alert',
label: 'Alert'
}, {
value: 'loading',
label: 'Loading'
}, {
value: 'message',
label: 'Message'
}, {
value: 'message-box',
label: 'MessageBox'
}, {
value: 'notification',
label: 'Notification'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu'
}, {
value: 'tabs',
label: 'Tabs'
}, {
value: 'breadcrumb',
label: 'Breadcrumb'
}, {
value: 'dropdown',
label: 'Dropdown'
}, {
value: 'steps',
label: 'Steps'
}]
}, {
value: 'others',
label: 'Others',
children: [{
value: 'dialog',
label: 'Dialog'
}, {
value: 'tooltip',
label: 'Tooltip'
}, {
value: 'popover',
label: 'Popover'
}, {
value: 'card',
label: 'Card'
}, {
value: 'carousel',
label: 'Carousel'
}, {
value: 'collapse',
label: 'Collapse'
}]
}]
}, {
value: 'resource',
label: 'Resource',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'docs',
label: 'Design Documentation'
}]
2017-01-22 11:32:05 +08:00
}]
};
}
};
< / script >
```
:::
### Attributes
| Attribute | Description | Type | Options | Default|
|---------- |-------------------- |---------|------------- |-------- |
2019-03-21 18:55:21 +08:00
| value / v-model | binding value | array | — | — |
2017-02-19 00:50:55 +08:00
| options | data of the options | array | — | — |
| props | configuration options, see the following table | object | — | — |
2017-11-25 20:25:20 +08:00
| separator | option separator | string | — | / |
2017-02-19 00:50:55 +08:00
| 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 |
2017-01-22 12:45:46 +08:00
| filterable | whether the options can be searched | boolean | — | — |
2017-10-10 18:06:01 +08:00
| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
2017-02-19 00:50:55 +08:00
| change-on-select | whether selecting an option of any level is permitted | boolean | — | false |
2017-10-12 17:50:06 +08:00
| size | size of Input | string | medium / small / mini | — |
2017-10-18 18:31:03 +08:00
| 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) | — | — |
2017-02-19 00:50:55 +08:00
### 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 | — | — |
2017-01-22 11:32:05 +08:00
### Events
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
2017-02-19 00:50:55 +08:00
| change | triggers when the binding value changes | value |
2018-07-20 17:37:34 +08:00
| active-item-change | triggers when active option of its parent changes, only works when `change-on-select` is `false` | an array of active options |
2018-01-14 12:29:43 +08:00
| blur | triggers when Cascader blurs | (event: Event) |
| focus | triggers when Cascader focuses | (event: Event) |
2018-11-14 12:25:41 +08:00
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
