2020-08-13 15:18:26 +08:00
## Cascader
Si las opciones tienen una estructura jerárquica clara, se puede utilizar Cascader para verlas y seleccionarlas.
### Uso básico
Hay dos maneras de ampliar los elementos de opción hijos.
:::demo Asignar el atributo `options` a un array de opciones genera un Cascader. El atributo `props.expandTrigger` define cómo se expanden las opciones hijo.
```html
< div class = "block" >
< span class = "demonstration" > Child options expand when clicked (default)< / span >
< el-cascader
v-model="value"
:options="options"
@change ="handleChange"></ el-cascader >
< / div >
< div class = "block" >
< span class = "demonstration" > Child options expand when hovered< / span >
< el-cascader
v-model="value"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change ="handleChange"></ el-cascader >
< / div >
< script >
export default {
data() {
return {
value: [],
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'
}]
}]
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
< / script >
2021-06-08 13:32:53 +08:00
<!--
< setup >
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
value: [],
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',
},
],
},
],
});
const handleChange = (value) => {
console.log(value);
};
return {
...toRefs(state),
handleChange,
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
:::
### Opción Disabled
Deshabilite una opción estableciendo el campo `disabled` en las opciones del objeto.
:::demo En este ejemplo, el primer ítem en el array `options` tiene un campo `disabled: true` , por lo que está deshabilitado. De forma predeterminada, Cascader comprueba el campo `disabled` en cada objeto de las opciones; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo `props.disabled` (consulte la tabla de la API a continuación para obtener más detalles). Y por supuesto, el nombre de campo `value` , `label` y `children` también se pueden personalizar de la misma manera.
```html
< el-cascader :options = "options" > < / el-cascader >
< script >
export default {
data() {
return {
options: [{
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 >
2021-06-08 13:32:53 +08:00
<!--
< setup >
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
options: [
{
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',
},
],
},
],
});
return {
...toRefs(state),
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
:::
### Limpiable
Establezca el atributo `clearable` para `el-cascader` y aparecerá un icono de borrado cuando se seleccione y se pase el ratón por encima.
:::demo
```html
< el-cascader :options = "options" clearable > < / 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 >
2021-06-08 13:32:53 +08:00
<!--
< setup >
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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',
},
],
},
],
});
return {
...toRefs(state),
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
:::
### Visualizar sólo el último nivel
La entrada puede mostrar sólo el último nivel en lugar de todos los niveles.
:::demo El atributo `show-all-levels` define si se muestran todos los niveles. Si es `false` , sólo se muestra el último nivel.
```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 >
2021-06-08 13:32:53 +08:00
<!--
< setup >
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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',
},
],
},
],
});
return {
...toRefs(state),
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
:::
### Selección múltiple
Establezca `props.multiple = true` para usar la selección múltiple.
:::demo Cuando se utiliza la selección múltiple, todas las etiquetas seleccionadas se mostrarán de forma predeterminada, usted puede establecer `collapse-tags = true` para plegar las etiquetas seleccionadas.
```html
< div class = "block" >
< span class = "demonstration" > Display all tags (default)< / span >
< el-cascader
:options="options"
:props="props"
clearable>< / el-cascader >
< / div >
< div class = "block" >
< span class = "demonstration" > Collapse tags< / span >
< el-cascader
:options="options"
:props="props"
collapse-tags
clearable>< / el-cascader >
< / div >
< script >
export default {
data() {
return {
props: { multiple: true },
options: [{
value: 1,
label: 'Asia',
children: [{
value: 2,
label: 'China',
children: [
{ value: 3, label: 'Beijing' },
{ value: 4, label: 'Shanghai' },
{ value: 5, label: 'Hangzhou' }
]
}, {
value: 6,
label: 'Japan',
children: [
{ value: 7, label: 'Tokyo' },
{ value: 8, label: 'Osaka' },
{ value: 9, label: 'Kyoto' }
]
}, {
value: 10,
label: 'Korea',
children: [
{ value: 11, label: 'Seoul' },
{ value: 12, label: 'Busan' },
{ value: 13, label: 'Taegu' }
]
}]
}, {
value: 14,
label: 'Europe',
children: [{
value: 15,
label: 'France',
children: [
{ value: 16, label: 'Paris' },
{ value: 17, label: 'Marseille' },
{ value: 18, label: 'Lyon' }
]
}, {
value: 19,
label: 'UK',
children: [
{ value: 20, label: 'London' },
{ value: 21, label: 'Birmingham' },
{ value: 22, label: 'Manchester' }
]
}]
}, {
value: 23,
label: 'North America',
children: [{
value: 24,
label: 'US',
children: [
{ value: 25, label: 'New York' },
{ value: 26, label: 'Los Angeles' },
{ value: 27, label: 'Washington' }
]
}, {
value: 28,
label: 'Canada',
children: [
{ value: 29, label: 'Toronto' },
{ value: 30, label: 'Montreal' },
{ value: 31, label: 'Ottawa' }
]
}]
}]
};
}
};
< / script >
2021-06-08 13:32:53 +08:00
<!--
< setup >
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
props: { multiple: true },
options: [
{
value: 1,
label: 'Asia',
children: [
{
value: 2,
label: 'China',
children: [
{ value: 3, label: 'Beijing' },
{ value: 4, label: 'Shanghai' },
{ value: 5, label: 'Hangzhou' },
],
},
{
value: 6,
label: 'Japan',
children: [
{ value: 7, label: 'Tokyo' },
{ value: 8, label: 'Osaka' },
{ value: 9, label: 'Kyoto' },
],
},
{
value: 10,
label: 'Korea',
children: [
{ value: 11, label: 'Seoul' },
{ value: 12, label: 'Busan' },
{ value: 13, label: 'Taegu' },
],
},
],
},
{
value: 14,
label: 'Europe',
children: [
{
value: 15,
label: 'France',
children: [
{ value: 16, label: 'Paris' },
{ value: 17, label: 'Marseille' },
{ value: 18, label: 'Lyon' },
],
},
{
value: 19,
label: 'UK',
children: [
{ value: 20, label: 'London' },
{ value: 21, label: 'Birmingham' },
{ value: 22, label: 'Manchester' },
],
},
],
},
{
value: 23,
label: 'North America',
children: [
{
value: 24,
label: 'US',
children: [
{ value: 25, label: 'New York' },
{ value: 26, label: 'Los Angeles' },
{ value: 27, label: 'Washington' },
],
},
{
value: 28,
label: 'Canada',
children: [
{ value: 29, label: 'Toronto' },
{ value: 30, label: 'Montreal' },
{ value: 31, label: 'Ottawa' },
],
},
],
},
],
});
return {
...toRefs(state),
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
:::
### Seleccione cualquier nivel de opciones
En la selección única, sólo se pueden comprobar los nodos de la hoja, y en la selección múltiple, los nodos padres de la comprobación conducirán a que los nodos de la hoja se comprueben con el tiempo. Cuando se activa esta función, puede hacer que los nodos padre e hijo se desacoplen y usted puede seleccionar cualquier nivel de opciones.
:::demo Establezca `props.checkStrictly = true` para que el estado comprobado de un nodo no afecte a sus nodos padre y nodos hijos, y entonces podrá seleccionar cualquier nivel de opciones.
```html
< div class = "block" >
< span class = "demonstration" > Select any level of options (Single selection)< / span >
< el-cascader
:options="options"
:props="{ checkStrictly: true }"
clearable>< / el-cascader >
< / div >
< div class = "block" >
< span class = "demonstration" > Select any level of options (Multiple selection)< / span >
< el-cascader
:options="options"
:props="{ multiple: true, checkStrictly: true }"
clearable>< / 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 >
2021-06-08 13:32:53 +08:00
<!--
< setup >
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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',
},
],
},
],
});
return {
...toRefs(state),
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
:::
### Carga dinámica
Carga dinámica de sus nodos hijos cuando se selecciona un nodo.
:::demo Establezca `lazy = true` para utilizar la carga dinámica, y deberá especificar cómo cargar la fuente de datos mediante `lazyload` . Hay dos parámetros de `lazyload` , el primer parámetro `node` es el nodo en el que se hace clic actualmente, y el `resolve` es una llamada de retorno que indica que la carga ha terminado y que debe invocarse. Para mostrar el estado del nodo con mayor precisión, puede añadir un campo `leaf` (puede ser modificado por `props.leaf` ) para indicar si se trata de un nodo de hoja. De lo contrario, se deducirá verificando si tiene algún nodo hijo.
```html
< el-cascader :props = "props" > < / el-cascader >
< script >
let id = 0;
export default {
data() {
return {
props: {
lazy: true,
lazyLoad (node, resolve) {
const { level } = node;
setTimeout(() => {
const nodes = Array.from({ length: level + 1 })
.map(item => ({
value: ++id,
label: `Option - ${id}` ,
leaf: level >= 2
}));
// Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
resolve(nodes);
}, 1000);
}
}
};
}
};
< / script >
2021-06-08 13:32:53 +08:00
<!--
< setup >
import { defineComponent, reactive, toRefs } from 'vue';
let id = 0;
export default defineComponent({
setup() {
const state = reactive({
props: {
lazy: true,
lazyLoad(node, resolve) {
const { level } = node;
setTimeout(() => {
const nodes = Array.from({ length: level + 1 }).map((item) => ({
value: ++id,
label: `Option - ${id}` ,
leaf: level >= 2,
}));
// Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
resolve(nodes);
}, 1000);
},
},
});
return {
...toRefs(state),
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
:::
### Filtrable
Buscar y seleccionar opciones con una palabra clave.
:::demo Añadir `filtrable` a `el-cascader` permite el filtrado. Cascader hará coincidir los nodos cuya etiqueta o etiqueta de padre (de acuerdo con `show-all-levels` ) incluya una palabra clave de entrada. Por supuesto, puedes personalizar la lógica de búsqueda mediante el `filter-method` que acepta una función, el primer parámetro es `nodo` , el segundo es `keyword` , y necesitas devolver un valor booleano que indique si da en el blanco.
```html
< div class = "block" >
< span class = "demonstration" > Filterable (Single selection)< / span >
< el-cascader
placeholder="Try searchingL Guide"
:options="options"
filterable>< / el-cascader >
< / div >
< div class = "block" >
< span class = "demonstration" > Filterable (Multiple selection)< / span >
< el-cascader
placeholder="Try searchingL Guide"
:options="options"
:props="{ multiple: true }"
filterable>< / 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 >
2021-06-08 13:32:53 +08:00
<!--
< setup >
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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',
},
],
},
],
});
return {
...toRefs(state),
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
:::
### Contenido de opciones personalizadas
Puede personalizar el contenido del nodo de cascada.
:::demo Puede personalizar el contenido del nodo del cascader mediante `scoped slot` . Tendrá acceso a `node` y `data` en el ámbito de aplicación, representando el objeto Node y los datos del nodo actual respectivamente.
```html
< el-cascader :options = "options" >
2020-10-30 23:26:33 +08:00
< template #default ="{ node , data }" >
2020-08-13 15:18:26 +08:00
< span > {{ data.label }}< / span >
< span v-if = "!node.isLeaf" > ({{ data.children.length }}) < / span >
< / template >
< / 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 >
2021-06-08 13:32:53 +08:00
<!--
< setup >
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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',
},
],
},
],
});
return {
...toRefs(state),
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
:::
### Panel cascader
`CascaderPanel` es el componente central de `Cascader` que tiene varias características como selección única, selección múltiple, carga dinámica, etc.
:::demo Al igual que `el-cascader` , puede establecer opciones alternativas mediante `options` , y habilitar otras características mediante `props` , consulte el formulario de la API a continuación para obtener más detalles.
```html
< el-cascader-panel :options = "options" > < / el-cascader-panel >
< 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 >
2021-06-08 13:32:53 +08:00
<!--
< setup >
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
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',
},
],
},
],
});
return {
...toRefs(state),
};
},
});
< / setup >
-->
2020-08-13 15:18:26 +08:00
```
:::
### Atributos de Cascader
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- |
2020-10-30 23:26:33 +08:00
| model-value / v-model | valor ligado | - | — | — |
2020-08-13 15:18:26 +08:00
| options | datos de las opciones， `value` y `label` pueden ser personalizadas por `Props` . | array | — | — |
| props | opciones de configuración, consulte la siguiente tabla. | object | — | — |
| size | tamaño del input | string | medium / small / mini | — |
| placeholder | placeholder del input | string | — | Select |
| disabled | si Cascader esta deshabilitada | boolean | — | false |
| clearable | si el valor seleccionado puede ser borrado | boolean | — | false |
| show-all-levels | si muestra todos los niveles del valor seleccionado en el input | boolean | — | true |
| collapse-tags | si se colapsan los tags en la selección múltiple | boolean | - | false |
| separator | separador de las etiquetas de las opciones | string | — | ' / ' |
| filterable | si las opciones pueden ser usadas para la busqueda | boolean | — | — |
| filter-method | lógica de búsqueda personalizable. El primer parámetro es `node` , el segundo es `keyword` , y es necesario devolver un valor boolean que indique si se ha tenido éxito. | function(node, keyword) | - | - |
| debounce | retraso en milisegundos para el tipeo de los datos de filtro | number | — | 300 |
| before-filter | hook antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se abortará el filtrado. | function(value) | — | — |
| popper-class | nombre de clase personalizado para el menú desplegable de Cascader | string | — | — |
2021-07-16 09:10:55 +08:00
| popper-append-to-body| si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este `prop` en `false` . | boolean | - | true |
2020-08-13 15:18:26 +08:00
### Eventos de Cascader
| Nombre del evento | Descripción | Parámetros |
|---------- |-------- |---------- |
| change | se desencadena cuando cambia el valor ligado. | valor |
| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |
| blur | se desencadena cuando Cascader se desenfoca | (event: Event) |
| focus | se activa cuando Cascader se enfoca | (event: Event) |
| visible-change | se activa cuando aparece/desaparece el menú desplegable | verdadero cuando aparece, y falso de otra manera |
| remove-tag | se activa cuando se quita la etiqueta en modo de selección múltiple | el valor de la etiqueta que se quita |
### Cascader Methods
| Method Name | Description | Parameters |
| ---- | ---- | ---- |
| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |
### Slots de Cascader
| Nombre del slot | Descripción |
|---------|-------------|
| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |
| empty | cuando no hay opciones coincidentes. |
### Atributos del CascaderPanel
| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- |
2020-10-30 23:26:33 +08:00
| model-value / v-model | valor ligado | - | — | — |
2020-08-13 15:18:26 +08:00
| options | datos de las opciones， `value` y `label` pueden ser personalizadas por `Props` . | array | — | — |
| props | opciones de configuración, consulte la siguiente tabla. | object | — | — |
### Eventos de CascaderPanel
| Nombre de los evetos | Descripción | Parámetros |
|---------- |-------- |---------- |
| change | se desencadena cuando cambia el valor ligado. | valor |
| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |
### CascaderPanel Methods
| Method Name | Description | Parameters |
| ---- | ---- | ---- |
| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |
| clearCheckedNodes | clear checked nodes | - |
### Slots de CascaderPanel
| Nombre del slot | Descripción |
|---------|-------------|
| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |
### Props
| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ----------------- | ------ | ------ | ------ |
| expandTrigger | modo de disparo de las opciones de ampliación | string | click / hover | 'click' |
| multiple | si la selección múltiple esta activada | boolean | - | false |
| checkStrictly | si el estado verificado de un nodo no afecta a sus nodos padre e hijo | boolean | - | false |
| emitPath | cuando los nodos marcados cambian, si emitir o no un array de la ruta de un nodo, si es falso, sólo emite el valor del nodo. | boolean | - | true |
| lazy | si se deben cargar dinámicamente nodos hijo, usarlo con el atributo `lazyload` . | boolean | - | false |
| lazyLoad | para cargar datos de nodos hijo, sólo funciona cuando `lazy` es verdadero | function(node, resolve) | - | - |
| value | especificar qué clave de objeto de nodo se utiliza como valor del nodo | string | — | 'value' |
| label | especificar qué clave de objeto de nodo se utiliza como etiqueta del nodo | string | — | 'label' |
| children | especificar qué clave de objeto de nodo se utiliza como hijo del nodo | string | — | 'children' |
| disabled | especificar qué clave de objeto de nodo se utiliza como nodo desactivado | string | — | 'disabled' |
| leaf | especificar qué clave de objeto de nodo se utiliza como campo de hoja del nodo | string | — | 'leaf' |
