<el-radiodisabledv-model="radio1"label="selected and disabled">Option B</el-radio>
<el-radiodisabledv-model="radio"label="selected and disabled">Option B</el-radio>
</template>
</template>
<script>
<script>
exportdefault{
exportdefault{
data(){
data(){
return{
return{
radio1:'selected and disabled'
radio:'selected and disabled'
};
};
}
}
}
}
...
@@ -55,7 +55,7 @@ Suitable for choosing from some mutually exclusive options.
...
@@ -55,7 +55,7 @@ Suitable for choosing from some mutually exclusive options.
:::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
:::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
```html
```html
<el-radio-groupv-model="radio2">
<el-radio-groupv-model="radio">
<el-radio:label="3">Option A</el-radio>
<el-radio:label="3">Option A</el-radio>
<el-radio:label="6">Option B</el-radio>
<el-radio:label="6">Option B</el-radio>
<el-radio:label="9">Option C</el-radio>
<el-radio:label="9">Option C</el-radio>
...
@@ -65,7 +65,7 @@ Suitable for choosing from some mutually exclusive options.
...
@@ -65,7 +65,7 @@ Suitable for choosing from some mutually exclusive options.
@@ -174,7 +174,7 @@ You can clear Select using a clear icon.
...
@@ -174,7 +174,7 @@ You can clear Select using a clear icon.
value:'Option5',
value:'Option5',
label:'Option5'
label:'Option5'
}],
}],
value4:''
value:''
}
}
}
}
}
}
...
@@ -250,7 +250,7 @@ You can customize HTML templates for options.
...
@@ -250,7 +250,7 @@ You can customize HTML templates for options.
```html
```html
<template>
<template>
<el-selectv-model="value6"placeholder="Select">
<el-selectv-model="value"placeholder="Select">
<el-option
<el-option
v-for="item in cities"
v-for="item in cities"
:key="item.value"
:key="item.value"
...
@@ -285,7 +285,7 @@ You can customize HTML templates for options.
...
@@ -285,7 +285,7 @@ You can customize HTML templates for options.
value:'Guangzhou',
value:'Guangzhou',
label:'Guangzhou'
label:'Guangzhou'
}],
}],
value6:''
value:''
}
}
}
}
}
}
...
@@ -301,9 +301,9 @@ Display options in groups.
...
@@ -301,9 +301,9 @@ Display options in groups.
```html
```html
<template>
<template>
<el-selectv-model="value7"placeholder="Select">
<el-selectv-model="value"placeholder="Select">
<el-option-group
<el-option-group
v-for="group in options3"
v-for="group in options"
:key="group.label"
:key="group.label"
:label="group.label">
:label="group.label">
<el-option
<el-option
...
@@ -320,7 +320,7 @@ Display options in groups.
...
@@ -320,7 +320,7 @@ Display options in groups.
exportdefault{
exportdefault{
data(){
data(){
return{
return{
options3:[{
options:[{
label:'Popular cities',
label:'Popular cities',
options:[{
options:[{
value:'Shanghai',
value:'Shanghai',
...
@@ -345,7 +345,7 @@ Display options in groups.
...
@@ -345,7 +345,7 @@ Display options in groups.
label:'Dalian'
label:'Dalian'
}]
}]
}],
}],
value7:''
value:''
}
}
}
}
}
}
...
@@ -360,7 +360,7 @@ You can filter options for your desired ones.
...
@@ -360,7 +360,7 @@ You can filter options for your desired ones.
:::demo Adding `filterable` to `el-select` enables filtering. By default, Select will find all the options whose `label` attribute contains the input value. If you prefer other filtering strategies, you can pass the `filter-method`. `filter-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value.
:::demo Adding `filterable` to `el-select` enables filtering. By default, Select will find all the options whose `label` attribute contains the input value. If you prefer other filtering strategies, you can pass the `filter-method`. `filter-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value.
<el-radiodisabledv-model="radio1"label="selected and disabled">Option B</el-radio>
<el-radiodisabledv-model="radio"label="selected and disabled">Option B</el-radio>
</template>
</template>
<script>
<script>
exportdefault{
exportdefault{
data(){
data(){
return{
return{
radio1:'selected and disabled'
radio:'selected and disabled'
};
};
}
}
}
}
...
@@ -53,7 +53,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente.
...
@@ -53,7 +53,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente.
:::demo Combine `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlace la variable con `v-model` del elemento `el-radio-group` y asigne el valor del `label` en `el-radio`. Se provee el evento `change` con el valor actual como parámetro.
:::demo Combine `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlace la variable con `v-model` del elemento `el-radio-group` y asigne el valor del `label` en `el-radio`. Se provee el evento `change` con el valor actual como parámetro.
```html
```html
<el-radio-groupv-model="radio2">
<el-radio-groupv-model="radio">
<el-radio:label="3">Option A</el-radio>
<el-radio:label="3">Option A</el-radio>
<el-radio:label="6">Option B</el-radio>
<el-radio:label="6">Option B</el-radio>
<el-radio:label="9">Option C</el-radio>
<el-radio:label="9">Option C</el-radio>
...
@@ -63,7 +63,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente.
...
@@ -63,7 +63,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente.
<el-radiodisabledv-model="radio1"label="selected and disabled">Option B</el-radio>
<el-radiodisabledv-model="radio"label="selected and disabled">Option B</el-radio>
</template>
</template>
<script>
<script>
exportdefault{
exportdefault{
data(){
data(){
return{
return{
radio1:'selected and disabled'
radio:'selected and disabled'
};
};
}
}
}
}
...
@@ -55,7 +55,7 @@ Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.
...
@@ -55,7 +55,7 @@ Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.
:::demo Combinez `el-radio-group` avec `el-radio` pour afficher un groupe de radios. Liez une variable au `v-model` de `el-radio-group` et configurez le label dans `el-radio`. Cet élément fournit aussi l'évènement `change` qui a en paramètre la valeur courante.
:::demo Combinez `el-radio-group` avec `el-radio` pour afficher un groupe de radios. Liez une variable au `v-model` de `el-radio-group` et configurez le label dans `el-radio`. Cet élément fournit aussi l'évènement `change` qui a en paramètre la valeur courante.
```html
```html
<el-radio-groupv-model="radio2">
<el-radio-groupv-model="radio">
<el-radio:label="3">Option A</el-radio>
<el-radio:label="3">Option A</el-radio>
<el-radio:label="6">Option B</el-radio>
<el-radio:label="6">Option B</el-radio>
<el-radio:label="9">Option C</el-radio>
<el-radio:label="9">Option C</el-radio>
...
@@ -65,7 +65,7 @@ Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.
...
@@ -65,7 +65,7 @@ Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.
exportdefault{
exportdefault{
data(){
data(){
return{
return{
radio2:3
radio:3
};
};
}
}
}
}
...
@@ -81,7 +81,7 @@ Des radios affichés comme des boutons standards.
...
@@ -81,7 +81,7 @@ Des radios affichés comme des boutons standards.
@@ -129,7 +129,7 @@ Vous pouvez désactiver le composant lui-même.
...
@@ -129,7 +129,7 @@ Vous pouvez désactiver le composant lui-même.
value:'Option5',
value:'Option5',
label:'Option5'
label:'Option5'
}],
}],
value3:''
value:''
}
}
}
}
}
}
...
@@ -144,7 +144,7 @@ Vous pouvez ajouter un bouton pour effacer la sélection.
...
@@ -144,7 +144,7 @@ Vous pouvez ajouter un bouton pour effacer la sélection.
:::demo Ajoutez l'attribut `clearable` à `el-select` et l'icône de fermeture s'affichera après une sélection. Notez que `clearable` ne marche qu'avec les sélecteurs à choix unique.
:::demo Ajoutez l'attribut `clearable` à `el-select` et l'icône de fermeture s'affichera après une sélection. Notez que `clearable` ne marche qu'avec les sélecteurs à choix unique.
@@ -174,7 +174,7 @@ Vous pouvez ajouter un bouton pour effacer la sélection.
...
@@ -174,7 +174,7 @@ Vous pouvez ajouter un bouton pour effacer la sélection.
value:'Option5',
value:'Option5',
label:'Option5'
label:'Option5'
}],
}],
value4:''
value:''
}
}
}
}
}
}
...
@@ -250,7 +250,7 @@ Vous pouvez définir un template HTML pour l'affichage des options.
...
@@ -250,7 +250,7 @@ Vous pouvez définir un template HTML pour l'affichage des options.
```html
```html
<template>
<template>
<el-selectv-model="value6"placeholder="Select">
<el-selectv-model="value"placeholder="Select">
<el-option
<el-option
v-for="item in cities"
v-for="item in cities"
:key="item.value"
:key="item.value"
...
@@ -285,7 +285,7 @@ Vous pouvez définir un template HTML pour l'affichage des options.
...
@@ -285,7 +285,7 @@ Vous pouvez définir un template HTML pour l'affichage des options.
value:'Guangzhou',
value:'Guangzhou',
label:'Guangzhou'
label:'Guangzhou'
}],
}],
value6:''
value:''
}
}
}
}
}
}
...
@@ -301,9 +301,9 @@ Vous pouvez définir des groupes pour les options du menu.
...
@@ -301,9 +301,9 @@ Vous pouvez définir des groupes pour les options du menu.
```html
```html
<template>
<template>
<el-selectv-model="value7"placeholder="Select">
<el-selectv-model="value"placeholder="Select">
<el-option-group
<el-option-group
v-for="group in options3"
v-for="group in options"
:key="group.label"
:key="group.label"
:label="group.label">
:label="group.label">
<el-option
<el-option
...
@@ -320,7 +320,7 @@ Vous pouvez définir des groupes pour les options du menu.
...
@@ -320,7 +320,7 @@ Vous pouvez définir des groupes pour les options du menu.
exportdefault{
exportdefault{
data(){
data(){
return{
return{
options3:[{
options:[{
label:'Villes célèbres',
label:'Villes célèbres',
options:[{
options:[{
value:'Shanghai',
value:'Shanghai',
...
@@ -345,7 +345,7 @@ Vous pouvez définir des groupes pour les options du menu.
...
@@ -345,7 +345,7 @@ Vous pouvez définir des groupes pour les options du menu.
label:'Dalian'
label:'Dalian'
}]
}]
}],
}],
value7:''
value:''
}
}
}
}
}
}
...
@@ -360,7 +360,7 @@ Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus
...
@@ -360,7 +360,7 @@ Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus
:::demo Ajoutez `filterable` à `el-select` pour activer le filtrage. Par défaut, Select cherchera les options dont le `label` contient la valeur du filtre. Si vous préférez une autre stratégie de filtrage, utilisez `filter-method`. C'est une `Function` qui est appelée quand la valeur change, avec pour paramètre la valeur courante.
:::demo Ajoutez `filterable` à `el-select` pour activer le filtrage. Par défaut, Select cherchera les options dont le `label` contient la valeur du filtre. Si vous préférez une autre stratégie de filtrage, utilisez `filter-method`. C'est une `Function` qui est appelée quand la valeur change, avec pour paramètre la valeur courante.