@@ -1332,7 +1332,7 @@ When the row content is too long and you do not want to display the horizontal s
### Tree data and lazy mode
:::demo You can display tree structure data。When using it, the prop `row-key` is required。Also, child row data can be loaded asynchronously. Set `lazy` property of Table to true and the function `load`. Specify `hasChildren` attribute in row to determine which row contains children.
:::demo You can display tree structure data. When using it, the prop `row-key` is required. Also, child row data can be loaded asynchronously. Set `lazy` property of Table to true and the function `load`. Specify `hasChildren` attribute in row to determine which row contains children.
```html
<template>
...
...
@@ -1344,13 +1344,13 @@ When the row content is too long and you do not want to display the horizontal s
row-key="id">
<el-table-column
prop="date"
label="日期"
label="Date"
sortable
width="180">
</el-table-column>
<el-table-column
prop="name"
label="name"
label="Name"
sortable
width="180">
</el-table-column>
...
...
@@ -1366,12 +1366,12 @@ When the row content is too long and you do not want to display the horizontal s
:::demo Set `value` to specify the currently displayed month. If `value` is not specified, current month is displayed. `value` supports two-way binding.
:::demo Réglez `value` pour spécifier le mois à afficher. Si `value` n'est pas sépcifié, le mois actuel sera affiché. `value` supporte le two-way binding.
```html
<el-calendarv-model="value">
</el-calendar>
...
...
@@ -21,9 +21,9 @@ Display date.
```
:::
### Custom Content
### Contenu personnalisé
:::demo Customize what is displayed in the calendar cell by setting `scoped-slot` named `dateCell`. In `scoped-slot` you can get the date (the date of the current cell), data (including the type, isSelected, day attribute). For details, please refer to the API documentation below.
:::demo Personnalisez le contenu du calendrier en utilisant le `scoped-slot` appelé `dateCell`. Dans ce `scoped-slot` vous aurez accès au paramètres date (date de la cellule courante), data (incluant les attributs type, isSelected et day). pour plus d'informations, référez-vous à la documentation ci-dessous.
```html
<el-calendar>
<!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
...
...
@@ -43,23 +43,25 @@ Display date.
```
:::
### Range
### Intervalle
:::demo Set the `range` attribute to specify the display range of the calendar. Start time must be Monday, end time must be Sunday, and the time span cannot exceed two months.
:::demo Utilisez l'attribut `range` pour afficher un intervalle particulier. Le début doit être un lundi et la fin un dimanche, l'intervalle ne pouvant excéder deux mois.
| value / v-model | binding value | Date/string/number | — | — |
| range | time range, including start time and end time. Start time must be Monday, end time must be Sunday, the time span cannot exceed two months | Array | — | — |
| range | Intervalle de dates, début et fin inclus. Le début doit être un lundi et la fin un dimanche, l'intervalle ne pouvant excéder deux mois. | Array | — | — |
| date | date the cell represents | Date | — | — |
| data | { type, isSelected, day}. `type` indicates which month the date belongs, optional values are prev-month, current-month, next-month; `isSelected` indicates whether the date is selected; `day` is the formatted date in the format yyyy-MM-dd | Object | — | — |
| date | Date de la cellule courante. | Date | — | — |
| data | { type, isSelected, day }. `type` indique le mois de la date courante, les valeurs prev-month, current-month et next-month pouvant être utilisées; `isSelected` indique si la date est sélectionnée; `day` est la date formattée en yyyy-MM-dd. | Object | — | — |
@@ -382,7 +382,7 @@ Cet exemple montre comment vous pouvez personnaliser vos règles de validation p
:::
:::tip
Custom validate callback function must be called. See more advanced usage at[async-validator](https://github.com/yiminghe/async-validator).
Les callback de validations personnalisées doivent être appelées. Un usage plus avancé se trouve ici:[async-validator](https://github.com/yiminghe/async-validator).
:::
### Ajouter ou supprimer des champs dynamiquement
...
...
@@ -512,7 +512,7 @@ Custom validate callback function must be called. See more advanced usage at [as
:::
:::tip
When an `el-form-item` is nested in another `el-form-item`, its label width will be `0`. You can set `label-width` on that `el-form-item` if needed.
Lorsqu'un `el-form-item` est imbriqué dans un autre `el-form-item`, la largeur de son label sera `0`. Utilisez `label-width` sur ce `el-form-item` si besoin.
:::
### Taille
...
...
@@ -592,7 +592,7 @@ Tout les composants d'un formulaire héritent leur attribut `size` de ce formula
| rules | Règles de validation du formulaire. | object | — | — |
| inline | Si le formulaire est horizontal. | boolean | — | false |
| label-position | Position des labels. Si 'left' ou 'right', `label-width` est aussi requis. | string | left / right / top | right |
| label-width | Largeur des labels, tout les enfants directs hériteront de cette valeur. Width `auto` is supported. | string | — | — |
| label-width | Largeur des labels, tout les enfants directs hériteront de cette valeur. La largeur `auto` est supportée. | string | — | — |
Besides the native features of img, support lazy load, custom placeholder and load failure, etc.
### Basic Usage
En plus des propriétés natives de img, ce composant supporte le lazy loading, les placeholder personnalisés, les échecs de téléchargement, etc.
:::demo Indicate how the image should be resized to fit its container by `fit`, same as native [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。
### Usage basique
:::demo Indique comment l'image devrait être redimmensionnée pour s'adapter à son conteneur grâce à `fit`, identique au [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) natif.
```html
<divclass="demo-image">
<divclass="block"v-for="fit in fits":key="fit">
...
...
@@ -30,18 +31,18 @@ Besides the native features of img, support lazy load, custom placeholder and lo
### Placeholder
:::demo Custom placeholder content when image hasn't loaded yet by `slot = placeholder`
:::demo Placeholder personnalisé qui s'affiche lorsque l'image n'est pas encore chargée, grâce à `slot = placeholder`.
```html
<divclass="demo-image__placeholder">
<divclass="block">
<spanclass="demonstration">Default</span>
<spanclass="demonstration">Défaut</span>
<el-image:src="src"></el-image>
</div>
<divclass="block">
<spanclass="demonstration">Custom</span>
<spanclass="demonstration">Personnalisé</span>
<el-image:src="src">
<divslot="placeholder"class="image-slot">
Loading<spanclass="dot">...</span>
Chargement<spanclass="dot">...</span>
</div>
</el-image>
</div>
...
...
@@ -59,17 +60,17 @@ Besides the native features of img, support lazy load, custom placeholder and lo
```
:::
### Load Failed
### Échec du chargement
:::demo Custom failed content when error occurs to image load by `slot = error`
:::demo Contenu personnalisé qui s'affiche lorsque le chargement a échoué, grâce à `slot = error`.
```html
<divclass="demo-image__error">
<divclass="block">
<spanclass="demonstration">Default</span>
<spanclass="demonstration">Défaut</span>
<el-image></el-image>
</div>
<divclass="block">
<spanclass="demonstration">Custom</span>
<spanclass="demonstration">Personnalisé</span>
<el-image>
<divslot="error"class="image-slot">
<iclass="el-icon-picture-outline"></i>
...
...
@@ -80,9 +81,9 @@ Besides the native features of img, support lazy load, custom placeholder and lo
```
:::
### Lazy Load
### Lazy Loading
:::demo Use lazy load by `lazy = true`. Image will load until scroll into view when set. You can indicate scroll container that adds scroll listener to by `scroll-container`. If undefined, will be the nearest parent container whose overflow property is auto or scroll.
:::demo Utilisez le lazy loading avec `lazy = true`. Les images ne se chargeront que lorsque le scrolling les atteindra. Vous pouvez indiquer le conteneur grâce à `scroll-container`. Si undefined, ce sera le conteneur parent le plus proche avec la propriété overflow à auto ou scroll.
```html
<divclass="demo-image__lazy">
<el-imagev-for="url in urls":key="url":src="url"lazy></el-image>
...
...
@@ -108,25 +109,23 @@ Besides the native features of img, support lazy load, custom placeholder and lo
| src | Image source, same as native | string | — | - |
| fit | Indicate how the image should be resized to fit its container, same as[object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | fill / contain / cover / none / scale-down | — | - |
| alt | Native alt | string | - | - |
| lazy | Whether to use lazy load | boolean | — | false |
| scroll-container | The container to add scroll listener when using lazy load | string / HTMLElement | — | The nearest parent container whose overflow property is auto or scroll |
### Events
| Event Name | Description | Parameters |
| src | Source de l'image, identique au natif. | string | — | - |
| fit | Indique comment l'image devrait être redimmensionnée pour s'adapter à son conteneur, identique à[object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | fill / contain / cover / none / scale-down | — | - |
| alt | Attribut alt natif.| string | - | - |
| lazy | Si le lazy loading doit être utilisé. | boolean | — | false |
| scroll-container | Le conteneur auquel ajouter le listener du scroll en mode lazy loading. | string / HTMLElement | — | Le conteneur parent le plus proche avec la propriété overflow à auto ou scroll. |
@@ -520,9 +520,9 @@ Vous pouvez aller chercher des infos de suggestions sur un serveur distant.
```
:::
### Limit length
### Taille limite
:::demo `maxlength`and `minlength` are attributes of native input, they declare a limit on the number of characters a user can input. The "number of characters" is measured using JavaScript string length.Setting the `maxlength` prop for a text or textarea type of Input can limit the length of input value, allows you to show word count by setting `show-word-limit` to `true` at the same time.
:::demo `maxlength`et `minlength` sont des attributs natifs, indiquant la taille limite de l'input. Le nombre de caractères est mesuré par la taille de la chaine Javascript. Si vous utilisez `maxlength`, vous pourrez montrer le nombre de caractères en mettant `show-word-limit` à `true`.
```html
<el-input
...
...
@@ -564,7 +564,7 @@ export default {
| value / v-model | Variable liée. | string / number | — | — |
| maxlength| Identique à `maxlength` dans l'input natif. | number| — | — |
| minlength| Identique à `minlength` dans l'input natif. | number | — | — |
| show-word-limit | whether show word count，only works when `type` is 'text' or 'textarea' | boolean | — | false |
| show-word-limit | Affiche le nombre de caractères restant， ne marche que lorsque `type` est 'text' ou 'textarea'. | boolean | — | false |
| placeholder| Placeholder de l' Input. | string | — | — |
| clearable | Si le bouton de reset apparaît. | boolean | — | false |
| show-password | Si le champ doit un champ de mot de passe avec bouton de visualisation. | boolean | — | false |
@@ -4,7 +4,7 @@ Utilisé pour donner une note sur cinq étoiles.
### Usage
:::demo Rate divise les scores en trois niveaux et ces niveaux peuvent être distingués en utilisant différentes couleurs de fond. Par défaut ces couleurs sont identiques, mais vous pouvez affecter un tableau des codes couleur à l'attribut `colors`, ainsi que les deux seuils via `low-threshold` et `high-threshold`. Or you can assign them with a object which key is the threshold between two levels and value is the corresponding color.
:::demo Rate divise les scores en trois niveaux et ces niveaux peuvent être distingués en utilisant différentes couleurs de fond. Par défaut ces couleurs sont identiques, mais vous pouvez affecter un tableau des codes couleur à l'attribut `colors`, ainsi que les deux seuils via `low-threshold` et `high-threshold`. Vous pouvez aussi les affecter avec un objet dont la clé est le seuil et la valeur est la couleur correspondante.
```html
<divclass="block">
...
...
@@ -122,10 +122,10 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées.
| allow-half | Si les demi-étoiles sont autorisées. | boolean | — | false |
| low-threshold | Seuil entre les niveaux bas et moyen. La valeur sera incluse dans le niveau bas. | number | — | 2 |
| high-threshold | Seuil entre les niveaux moyen et haut. La valeur sera incluse entre dans le niveau haut. | number | — | 4 |
| colors | colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color. | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| colors | colors for icons. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est la couleur correspondante. | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| disabled-void-color | Couleur des icônes non-sélectionnées en lecture seule. | string | — | #EFF2F7 |
| icon-classes | class names of icons. If array, ot should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding icon class. | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
| icon-classes | Noms de classe des icônes. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est le nom de classe de l'icône. | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
| void-icon-class | Classe des icônes non-sélectionnées. | string | — | el-icon-star-off |
| disabled-void-icon-class | Classe des icônes non-sélectionnées en lecture seule. | string | — | el-icon-star-on |
| show-text | Si du texte doit apparaître à droite des étoiles. | boolean | — | false |
@@ -174,7 +174,7 @@ Vous pouvez sélectionner des intervalles de valeurs au lieu d'une valeur unique
```
:::
:::demo Setting this `marks` attribute can show mark on slider.
:::demo Vous pouvez afficher des marqueurs sur le slider grâce à l'attribut `marks`.
```html
<template>
<divclass="block">
...
...
@@ -230,7 +230,7 @@ Vous pouvez sélectionner des intervalles de valeurs au lieu d'une valeur unique
| label | Label pour les lecteurs d'écran. | string | — | — |
| debounce | Délai après écriture en millisecondes, marche quand `show-input` est `true`. | number | — | 300 |
| tooltip-class | Classe du tooltip. | string | — | — |
| marks | marks， type of key must be `number` and must in closed interval `[min, max]`, each mark can custom style| object | — | — |
| marks | Marqueurs， les clés doivent être des `number` et être comprises dans l'intervalle `[min, max]`. Chaque marqueur peut avoir un style particulier. | object | — | — |
@@ -1333,9 +1333,9 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
```
:::
### Tree data and lazy mode
### Arborescence et lazy loading
:::demo You can display tree structure data。When using it, the prop `row-key` is required。Also, child row data can be loaded asynchronously. Set `lazy` property of Table to true and the function `load`. Specify `hasChildren` attribute in row to determine which row contains children.
:::demo Vous pouvez afficher les données en arborescence, la propriété `row-key` devenant dans ce cas obligatoire. Les données enfants peuvent aussi être chargées de manière asynchrone. Mettez la propriété `lazy` à `true` and utilisez la fonction `load`. Spécifiez l'attribut `hasChildren` pour déterminer quelle ligne contient les enfants.
```html
<template>
...
...
@@ -1347,13 +1347,13 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
row-key="id">
<el-table-column
prop="date"
label="日期"
label="Date"
sortable
width="180">
</el-table-column>
<el-table-column
prop="name"
label="name"
label="Nom"
sortable
width="180">
</el-table-column>
...
...
@@ -1369,12 +1369,12 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
>
<el-table-column
prop="date"
label="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="name"
label="Nom"
width="180">
</el-table-column>
</el-table>
...
...
@@ -1830,7 +1830,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
| header-row-style | Fonction qui retourne un style pour chaque ligne de header. Peut aussi être un objet assignant un style à chaque ligne de header. | Function({row, rowIndex})/Object | — | — |
| header-cell-class-name | Fonction qui retourne un nom de classe pour chaque cellule de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule de header. | Function({row, column, rowIndex, columnIndex})/String | — | — |
| header-cell-style | Fonction qui retourne un style pour chaque cellule de header. Peut aussi être un objet assignant un style à chaque cellule de header. | Function({row, column, rowIndex, columnIndex})/Object | — | — |
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | Function(row)/String | — | — |
| row-key | Clé de chaque ligne, utilisée pour optimiser le rendu. Requise si `reserve-selection` est activé. Quand c'est un `String`, l'accès multi-niveaux est supporté, e.g. `user.info.id`, mais `user.info[0].id` n'est pas supporté. Dans ce dernier cas une `Function` devrait être utilisée. | Function(row)/String | — | — |
| empty-text | Texte à afficher quand il n'y a pas de données. Vous pouvez changer cette zone grâce à `slot="empty"`. | String | — | No Data |
| default-expand-all | Si toutes les lignes sont étendues par défaut, ne marche que si des lignes ont type="expand". | Boolean | — | false |
| expand-row-keys | Détermine les lignes qui sont étendues, contient les clés des lignes correspondantes. Vous devriez configurer `row-key` avant celle-ci. | Array | — | |
...
...
@@ -1841,9 +1841,9 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
| summary-method | La méthode pour calculer la somme. | Function({ columns, data }) | — | — |
| span-method | Méthode qui retourne les valeurs de colspan et rowspan. | Function({ row, column, rowIndex, columnIndex }) | — | — |
| select-on-indeterminate | Contrôle le comportement de la checkbox globale dans les tables avec sélection multiple lorsque seulement certaines lignes sont sélectionnées. Si `true`, toutes les lignes sont sélectionnées. | Boolean | — | true |
| indent | horizontal indentation of tree data | Number | — | 16 |
| lazy | whether to lazy loading data | Boolean | — | — |
| load | method for loading child row data, only works when `lazy` is true | Function({ row, treeNode, resolve }) | — | — |
| indent | Indentation horizontale de l'arborescence. | Number | — | 16 |
| lazy | Si le lazy loading doit être utilisé. | Boolean | — | — |
| load | Méthode a utiliser pour le lazy loading, ne fonctionne que lorsque `lazy` est `true`. | Function({ row, treeNode, resolve }) | — | — |
| disabled | Si l'onglet est désactivé. | boolean | — | false |
| name |identifiant correspondant au nom des onglets, utilisé par Tabs pour savoir quel est l'onglet actif. | string | — | Numéro de l'onglet dans l'ordre d'apparition, e.g. le premier est '1'. |
| name | Identifiant correspondant au nom des onglets, utilisé par Tabs pour savoir quel est l'onglet actif. | string | — | Numéro de l'onglet dans l'ordre d'apparition, e.g. le premier est '1'. |
| closable | Si l'onglet est supprimable. | boolean | — | false |
| lazy | Si le contenu de l'onglet bénéficie du lazy-loading. | boolean | — | false |
