elsa vue
1.0.0
⚡ elsa (eleme simple admin) est basé sur element-ui et encapsule el-form, el-table et d'autres composants, et convient au développement rapide de projets de gestion backend.
Pour des exemples d'utilisation, voir : exemple
npm i elsa - vue - S // vue main.js
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Elsa from 'elsa-vue'
Vue . use ( Element )
Vue . use ( Elsa ) usage:
< elsa-table border :columns =" columns " :dataSource =" dataSource " :pagination =" pagination " /> export default {
data ( ) {
return {
dataSource : [
{ name : 'eminoda' , age : 30 } ,
{ name : 'foo' , age : 40 } ,
{ name : 'bar' , age : 50 }
] ,
columns : [
{ label : '序号' , align : 'center' , type : 'index' , width : '50' } ,
{ label : '姓名' , align : 'center' , prop : 'name' , width : '100' } ,
{ label : '年龄' , align : 'center' , prop : 'age' , width : '100' }
] ,
pagination : {
pageSize : 10 ,
currentPage : 1 ,
total : 0 ,
currentChange : currentPage => { } ,
sizeChange : pageSize => { }
}
}
}
}| paramètre | illustrer | taper | Valeur facultative | valeur par défaut |
|---|---|---|---|---|
| colonnes | Informations sur la colonne | Tableau | ||
| Source de données | source de données | Tableau | ||
| pagination | Informations sur la pagination | Objet | ||
| ...elProps | attribut el-table |
| paramètre | illustrer | taper | Valeur facultative | valeur par défaut |
|---|---|---|---|---|
| taper | la sélection ajoute une colonne de zone de sélection l'index ajoute une colonne de numéro de série développer Afficher plus | Chaîne | sélection/index/développer | |
| étiquette | titre | Chaîne | ||
| soutenir | champ d'analyse | Chaîne | ||
| largeur | Largeur de colonne correspondante | Chaîne | ||
| fixé | Que la colonne soit fixée à gauche ou à droite, vrai signifie fixée à gauche | Chaîne/Booléen | vrai, gauche, droite | |
| formateur | Formatage des données | Fonction (ligne, colonne, cellValue) | ||
| show-overflow-info-bulle | Afficher une info-bulle lorsque le contenu est trop long et masqué | Booléen |
Pour plus de détails, voir : colonne el-table
| paramètre | illustrer | taper | Valeur facultative | valeur par défaut |
|---|---|---|---|---|
| Remplacer par dataSource | ||||
| frontière | S'il faut avoir des bordures verticales | Booléen | FAUX | |
| taille | taille | Chaîne | moyen/petit/mini | |
| ajuster | Si la largeur de la colonne est autoportante | Booléen | vrai |
Pour plus de détails, voir : attributs el-table
| paramètre | illustrer | taper | Valeur facultative | valeur par défaut |
|---|---|---|---|---|
| changement de sélection | Cet événement est déclenché lorsque la sélection change | Fonction(sélections) |
Pour plus de détails, voir : événements el-table
? Remarque : Certains événements sont difficiles à implémenter en fonction de la structure actuelle du fichier (comme : tri, filtrage, fusion de formulaires... Vous pouvez définir le contenu du fichier de configuration en données (au lieu de la méthode d'importation).
usage:
< elsa-form :config =" fields " :model =" model " labelWidth =" auto " label-suffix =" : " >
< el-row type =" flex " justify =" center " >
< el-button @click =" submit " type =" primary " >提交</ el-button >
< el-button @click =" reset " type =" warning " style =" margin-left:10px; " >重置</ el-button >
</ el-row >
</ elsa-form > export default {
data ( ) {
return {
fields : {
name : {
label : '用户名' ,
elTag : 'el-input' ,
elAttrs : {
placeholder : '请输入用户名'
} ,
customRender : 'nameCheck' ,
rules : [ { required : true , message : '用户名不能为空' , trigger : 'change' } ]
} ,
password : {
label : '密码' ,
elTag : 'el-input' ,
elAttrs : {
type : 'password' ,
showPassword : true
} ,
rules : [ { required : true , trigger : 'change' } ]
}
} ,
model : {
name : '' ,
password : ''
}
}
}
}| paramètre | illustrer | taper | Valeur facultative | valeur par défaut |
|---|---|---|---|---|
| configuration | Configuration des éléments de formulaire | Objet | ||
| modèle | modèle de données de formulaire | Objet | ||
| mise en page | disposition du formulaire | Tableau | ||
| désactivé | Le formulaire entier est désactivé | Booléen | FAUX | |
| ...elProps | Configuration des éléments de formulaire | Objet |
| paramètre | illustrer | taper | Valeur facultative | valeur par défaut |
|---|---|---|---|---|
| champ | Champs des éléments de formulaire, correspondant aux attributs du modèle | Objet | ||
| champ.étiquette | nom | Chaîne | ||
| champ.elTag | balise de forme d'élément | Chaîne | el-input/select/radio/cascader/date-picker/time-picker/upload | |
| champ.elAttrs | Attributs de l'élément de formulaire (se référer au composant correspondant elTag) | Objet | ||
| champ.elStyle | Style de style d'élément de formulaire | Objet | ||
| champ.extra | Message rapide | Chaîne | ||
| champ.extraIcon | icône d'icône de message rapide | Chaîne | el-icon-warning-outline | |
| champ.règles | Règles de validation des formulaires | Tableau | ||
| champ.options | Lorsqu'il est coché, la sélection est utilisée comme affichage des données | Tableau | ||
| champ.visible | Lien, vous pouvez contrôler l'affichage et le masquage selon le modèle[filed] | Booléen/Chaîne/Fonction({modèle}) | ||
| champ.customRender | Modèle affiché sur le côté droit d'elTag | Chaîne | ||
| champ.slotRender | Modèle dans elTag (par exemple : contenu en cours de téléchargement) | Chaîne |
Pour plus de détails, voir : méthodes el-form-item
Exemple de quelques propriétés spéciales
| paramètre | illustrer | taper | Valeur facultative | valeur par défaut |
|---|---|---|---|---|
| désactivé | Désactiver | Fonction({modèle})/Booléen | ||
| estRemote | elTag est un chargement paresseux d'el-select | Booléen | ||
| méthode à distance | elTag est un chargement paresseux d'el-select | Fonction (fait, {modèle}) / Booléen | ||
| paresseux | elTag est un chargement paresseux d'el-cascader | Booléen | ||
| paresseuxLoad | elTag est un chargement paresseux d'el-cascader | Fonction (nœud, résolution, { done }) / Booléen |
| paramètre | illustrer | taper | Valeur facultative | valeur par défaut |
|---|---|---|---|---|
| elTag | balise de forme d'élément | Chaîne | el-rangée/col | |
| elAttrs | Attributs de l'élément de formulaire (se référer au composant correspondant elTag) | Objet | ||
| enfants | enfant | Objet | ||
| champ | champs d'élément de formulaire | Chaîne |
| paramètre | illustrer | taper | Valeur facultative | valeur par défaut |
|---|---|---|---|---|
| largeur de l'étiquette | La largeur de l'étiquette du champ de formulaire | Chaîne | ||
| suffixe-étiquette | Suffixe pour les étiquettes des champs de formulaire | Chaîne | ||
| taille | taille | Chaîne | moyen/petit/mini |
Pour plus de détails, voir : attributs el-form
| paramètre | illustrer | taper | Valeur facultative | valeur par défaut |
|---|---|---|---|---|
| valider | Validation des données du formulaire | Fonction (erreur, modèle) | ||
| réinitialiser les champs | Réinitialiser l'élément du formulaire | Fonction(props<Array | String>) | ||
| effacerValider | Résultats de vérification clairs | Fonction(props<Array | String>) |
Pour plus de détails, voir : méthodes el-form
