mirror of https://github.com/ElemeFE/element
1421 lines
38 KiB
Markdown
1421 lines
38 KiB
Markdown
## Cascader
|
|
|
|
Si les options ont une structure hiérarchique claire, un Cascader peut être utilisé pour les afficher et les selectionner.
|
|
|
|
### Usage
|
|
|
|
Il y a deux manières de dérouler la liste des options.
|
|
|
|
:::demo Assigner un tableau à l'attribut `options` génère un Cascader. L'attribut `expand-trigger` détermine comment les options suivantes sont affichées. Cet exemple utilises aussi l'évènement `change`, qui a pour paramètre la valeur du Cascader, c'est à dire un tableau constitué de chaque niveau jusqu'à la valeur selectionnée, comme un chemin.
|
|
```html
|
|
<div class="block">
|
|
<span class="demonstration">Les options se déroulent après un clic (défaut)</span>
|
|
<el-cascader
|
|
:options="options"
|
|
v-model="selectedOptions"
|
|
@change="handleChange">
|
|
</el-cascader>
|
|
</div>
|
|
<div class="block">
|
|
<span class="demonstration">Les options se déroulent au passage de la souris</span>
|
|
<el-cascader
|
|
expand-trigger="hover"
|
|
:options="options"
|
|
v-model="selectedOptions2"
|
|
@change="handleChange">
|
|
</el-cascader>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
options: [{
|
|
value: 'guide',
|
|
label: 'Guide',
|
|
children: [{
|
|
value: 'disciplines',
|
|
label: 'Disciplines',
|
|
children: [{
|
|
value: 'consistency',
|
|
label: 'Consistency'
|
|
}, {
|
|
value: 'feedback',
|
|
label: 'Feedback'
|
|
}, {
|
|
value: 'efficiency',
|
|
label: 'Efficiency'
|
|
}, {
|
|
value: 'controllability',
|
|
label: 'Controllability'
|
|
}]
|
|
}, {
|
|
value: 'navigation',
|
|
label: 'Navigation',
|
|
children: [{
|
|
value: 'side nav',
|
|
label: 'Side Navigation'
|
|
}, {
|
|
value: 'top nav',
|
|
label: 'Top Navigation'
|
|
}]
|
|
}]
|
|
}, {
|
|
value: 'component',
|
|
label: 'Component',
|
|
children: [{
|
|
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',
|
|
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'
|
|
}]
|
|
}],
|
|
selectedOptions: [],
|
|
selectedOptions2: []
|
|
};
|
|
},
|
|
methods: {
|
|
handleChange(value) {
|
|
console.log(value);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Options désactivées
|
|
|
|
Désactivez une option en configurant `disabled` dans l'objet option.
|
|
|
|
:::demo Dans cet exemple, le premier item dans le tableau `options` est configuré avec `disabled: true`, il est donc désactivé. Par défaut, Cascader recherche le champ `disabled` dans chaque option; si vous utilisez un autre nom de champ pour indiquer que l'option est désactivée, vous pouvez l'assigner dans l'attribut `props` (voir la table de l'API ci-dessous). Les champs `value`, `label` et `children` peuvent être personnalisés de la même manière.
|
|
```html
|
|
<el-cascader
|
|
:options="optionsWithDisabled"
|
|
></el-cascader>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
optionsWithDisabled: [{
|
|
value: 'guide',
|
|
label: 'Guide',
|
|
disabled: true,
|
|
children: [{
|
|
value: 'disciplines',
|
|
label: 'Disciplines',
|
|
children: [{
|
|
value: 'consistency',
|
|
label: 'Consistency'
|
|
}, {
|
|
value: 'feedback',
|
|
label: 'Feedback'
|
|
}, {
|
|
value: 'efficiency',
|
|
label: 'Efficiency'
|
|
}, {
|
|
value: 'controllability',
|
|
label: 'Controllability'
|
|
}]
|
|
}, {
|
|
value: 'navigation',
|
|
label: 'Navigation',
|
|
children: [{
|
|
value: 'side nav',
|
|
label: 'Side Navigation'
|
|
}, {
|
|
value: 'top nav',
|
|
label: 'Top Navigation'
|
|
}]
|
|
}]
|
|
}, {
|
|
value: 'component',
|
|
label: 'Component',
|
|
children: [{
|
|
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',
|
|
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'
|
|
}]
|
|
}]
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Afficher uniquement le dernier niveau
|
|
|
|
Le champ peut n'afficher que le dernier niveau au lieu de tous.
|
|
|
|
:::demo L'attribut `show-all-levels` détermine si tous les niveaux sont affichés. Si il est à `false`, seul le dernier niveau est affiché.
|
|
```html
|
|
<el-cascader
|
|
:options="options"
|
|
:show-all-levels="false"
|
|
></el-cascader>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
options: [{
|
|
value: 'guide',
|
|
label: 'Guide',
|
|
children: [{
|
|
value: 'disciplines',
|
|
label: 'Disciplines',
|
|
children: [{
|
|
value: 'consistency',
|
|
label: 'Consistency'
|
|
}, {
|
|
value: 'feedback',
|
|
label: 'Feedback'
|
|
}, {
|
|
value: 'efficiency',
|
|
label: 'Efficiency'
|
|
}, {
|
|
value: 'controllability',
|
|
label: 'Controllability'
|
|
}]
|
|
}, {
|
|
value: 'navigation',
|
|
label: 'Navigation',
|
|
children: [{
|
|
value: 'side nav',
|
|
label: 'Side Navigation'
|
|
}, {
|
|
value: 'top nav',
|
|
label: 'Top Navigation'
|
|
}]
|
|
}]
|
|
}, {
|
|
value: 'component',
|
|
label: 'Component',
|
|
children: [{
|
|
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',
|
|
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'
|
|
}]
|
|
}]
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Valeur par défaut
|
|
|
|
:::demo La valeur par défaut peut être définit grâce à un tableau.
|
|
```html
|
|
<el-cascader
|
|
:options="options"
|
|
v-model="selectedOptions3"
|
|
></el-cascader>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
options: [{
|
|
value: 'guide',
|
|
label: 'Guide',
|
|
children: [{
|
|
value: 'disciplines',
|
|
label: 'Disciplines',
|
|
children: [{
|
|
value: 'consistency',
|
|
label: 'Consistency'
|
|
}, {
|
|
value: 'feedback',
|
|
label: 'Feedback'
|
|
}, {
|
|
value: 'efficiency',
|
|
label: 'Efficiency'
|
|
}, {
|
|
value: 'controllability',
|
|
label: 'Controllability'
|
|
}]
|
|
}, {
|
|
value: 'navigation',
|
|
label: 'Navigation',
|
|
children: [{
|
|
value: 'side nav',
|
|
label: 'Side Navigation'
|
|
}, {
|
|
value: 'top nav',
|
|
label: 'Top Navigation'
|
|
}]
|
|
}]
|
|
}, {
|
|
value: 'component',
|
|
label: 'Component',
|
|
children: [{
|
|
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',
|
|
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'
|
|
}]
|
|
}],
|
|
selectedOptions3: ['component', 'data', 'tag']
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Changement après sélection
|
|
|
|
Les options parentes peuvent aussi être sélectionnées.
|
|
|
|
:::demo Par défaut seules les options de dernier niveau peuvent être sélectionnées. En réglant `change-on-select` à `true`, les options parentes peuvent aussi être sélectionnées.
|
|
```html
|
|
<el-cascader
|
|
:options="options"
|
|
change-on-select
|
|
></el-cascader>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
options: [{
|
|
value: 'guide',
|
|
label: 'Guide',
|
|
children: [{
|
|
value: 'disciplines',
|
|
label: 'Disciplines',
|
|
children: [{
|
|
value: 'consistency',
|
|
label: 'Consistency'
|
|
}, {
|
|
value: 'feedback',
|
|
label: 'Feedback'
|
|
}, {
|
|
value: 'efficiency',
|
|
label: 'Efficiency'
|
|
}, {
|
|
value: 'controllability',
|
|
label: 'Controllability'
|
|
}]
|
|
}, {
|
|
value: 'navigation',
|
|
label: 'Navigation',
|
|
children: [{
|
|
value: 'side nav',
|
|
label: 'Side Navigation'
|
|
}, {
|
|
value: 'top nav',
|
|
label: 'Top Navigation'
|
|
}]
|
|
}]
|
|
}, {
|
|
value: 'component',
|
|
label: 'Component',
|
|
children: [{
|
|
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',
|
|
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'
|
|
}]
|
|
}]
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Charger les options dynamiquement
|
|
|
|
Il est possible de charger dynamiquement les options quand on clique ou passe la souris sur leurs parent.
|
|
|
|
:::demo Dans cet exemple, les optionsn'ont pas de données de villes au moment de l'initialisation. Grâce à l'évènement `active-item-change` vous pouvez charger les villes de manière dynamique. De plus, cet exemple montre comment `props` peut être utilisé.
|
|
```html
|
|
<el-cascader
|
|
:options="options2"
|
|
@active-item-change="handleItemChange"
|
|
:props="props"
|
|
></el-cascader>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
options2: [{
|
|
label: 'California',
|
|
cities: []
|
|
}, {
|
|
label: 'Florida',
|
|
cities: []
|
|
}],
|
|
props: {
|
|
value: 'label',
|
|
children: 'cities'
|
|
}
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
handleItemChange(val) {
|
|
console.log('active item:', val);
|
|
setTimeout(_ => {
|
|
if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {
|
|
this.options2[0].cities = [{
|
|
label: 'Los Angeles'
|
|
}];
|
|
} else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {
|
|
this.options2[1].cities = [{
|
|
label: 'Orlando'
|
|
}];
|
|
}
|
|
}, 300);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Filtres
|
|
|
|
Recherchez une option particulière en entrant des mots-clé.
|
|
|
|
:::demo Ajouter `filterable` à `el-cascader` active le filtrage.
|
|
```html
|
|
<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>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
options: [{
|
|
value: 'guide',
|
|
label: 'Guide',
|
|
children: [{
|
|
value: 'disciplines',
|
|
label: 'Disciplines',
|
|
children: [{
|
|
value: 'consistency',
|
|
label: 'Consistency'
|
|
}, {
|
|
value: 'feedback',
|
|
label: 'Feedback'
|
|
}, {
|
|
value: 'efficiency',
|
|
label: 'Efficiency'
|
|
}, {
|
|
value: 'controllability',
|
|
label: 'Controllability'
|
|
}]
|
|
}, {
|
|
value: 'navigation',
|
|
label: 'Navigation',
|
|
children: [{
|
|
value: 'side nav',
|
|
label: 'Side Navigation'
|
|
}, {
|
|
value: 'top nav',
|
|
label: 'Top Navigation'
|
|
}]
|
|
}]
|
|
}, {
|
|
value: 'component',
|
|
label: 'Component',
|
|
children: [{
|
|
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',
|
|
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'
|
|
}]
|
|
}]
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Attributs
|
|
| Attribut | Description | Type | Options | Défaut|
|
|
|---------- |-------------------- |---------|------------- |-------- |
|
|
| value / v-model | Valeur sélectionnée. | array | — | — |
|
|
| options | Données des options. | array | — | — |
|
|
| props | Options de configuration, voir la table suivante. | object | — | — |
|
|
| separator | Séparateur des options. | string | — | / |
|
|
| popper-class | Classe personnalisée pour le menu déroulant du Cascader | string | — | — |
|
|
| placeholder | Placeholder du champ. | string | — | Select |
|
|
| disabled | Désactive le Cascader. | boolean | — | false |
|
|
| clearable | Détermine si la valeur peut être effacée. | boolean | — | false |
|
|
| expand-trigger | Mode de déclenchement du menu suivant. | string | click / hover | click |
|
|
| show-all-levels | Détermine si tout les niveaux doivent être affichés dans le champ. | boolean | — | true |
|
|
| filterable | Active la recherche par mots-clé. | boolean | — | — |
|
|
| debounce | Délai d'attente après avoir entré un mot-clé, en millisecondes. | number | — | 300 |
|
|
| change-on-select | Détermine si il est possible de sélectionner une option de n'importe quel niveau. | boolean | — | false |
|
|
| size | taille du champ | string | medium / small / mini | — |
|
|
| before-filter | Fonction de hook qui s'active avant le filtrage, le paramètre étant la valeur entrée. Si `false` est retourné ou bien une `Promise` est retournée puis rejetée, le filtrage sera annulé. | function(value) | — | — |
|
|
|
|
### props
|
|
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
|
| --------- | ----------------- | ------ | ------ | ------ |
|
|
| label | Détermine quelle clé d'option est utilisé comme label. | string | — | — |
|
|
| value | Détermine quelle clé d'option est utilisé comme valeur. | string | — | — |
|
|
| children | Détermine quelle clé d'option est utilisé en tant que sous-options. | string | — | — |
|
|
| disabled | Détermine quelle clé d'option est utilisé pour indiquer si l'option est désactivée. | string | — | — |
|
|
|
|
### Évènements
|
|
| Nom | Description | Paramètres |
|
|
|---------- |-------- |---------- |
|
|
| change | Se déclecnhe lorsque la valeur change. | La valeur |
|
|
| active-item-change | Se déclenche quand le parent de l'option active change, ne marche que si `change-on-select` est `false` | Un tableau des options actives |
|
|
| blur | Se déclenche quand le Cascader perds le focus. | (event: Event) |
|
|
| focus | Se déclenche quand le Cascader a le focus. | (event: Event) |
|
|
| visible-change | Se déclenche quand le menu apparaît ou disparaît. | `true` quand il apparaît, `false` sinon. |
|