vue element crud

Malheureusement, ce référentiel n'est plus maintenu, utilisez-le à vos propres risques.

Remarque : ce projet peut avoir quelques problèmes dans la mise en œuvre des composants, et au fil du temps, les versions du framework Vue et de la bibliothèque d'éléments UI peuvent également être mises à jour, ce qui peut ne pas convenir au présent et à l'avenir.

vue-element-crud

Un composant vue CRUD encapsulé basé sur les célèbres composants vue UI - element-ui.

Un composant d'ajout, de suppression, de modification et de vérification basé sur les composants element-ui .

Voici une démo simple.

Vous pouvez lire les exemples et le fichier de code source Crud.vue dans le projet pour vous aider à comprendre l'utilisation spécifique du composant.

Développement local

Vous pouvez télécharger ou cloner ce référentiel tant que vous le souhaitez. Vous pouvez ensuite exécuter des scripts npm.

$ npm install
$ npm run dev

Ouvrez un nouveau terminal,

$ npm run build:watch

Usage

Vous pouvez utiliser vue-element-crud comme plugin vue ou comme composant vue.

Si vous souhaitez le traiter comme un composant, vous pouvez importer CRUD en tant que composants.

En tant que composant

 import { CRUD } from 'vue-element-crud'

export default {
  components : { 'crud' : CRUD }
}

Sinon, vous pouvez le traiter comme un plugin.

En tant que plugin

Étape 1, initialiser le projet

Vous devrez peut-être lancer un projet vue ou en prendre un existant pour continuer car vue-loader ou babel-loader ou css-loader sont requis pour element-ui.

$ vue init webpack < project-name > 

Étape 2, installer

Ce composant dépend de element-ui, et element-ui sera automatiquement installé lorsque vous installerez vue-element-crud , vous n'aurez donc pas à installer element-ui en plus.

$ npm install -S vue-element-crud

Étape 3, utilisation de vue

Ajoutez ces lignes ci-dessous à votre main.js

 import 'element-ui/lib/theme-default/index.css'
import ElementUI from 'element-ui'
import CRUD from 'vue-element-crud'

Vue . use ( ElementUI )
Vue . use ( CRUD ) 

Étape 4, reportez-vous aux exemples

Vous pouvez lire la documentation ou des exemples pour découvrir comment implémenter les accessoires et les méthodes de ce vue-element-crud.

API

accessoires	taper	requis	défaut	description
données	Tableau	vrai	---	Tableau de données de table
formulaire	Objet	vrai	---	Objet de formulaire pour stocker les variables des éléments de formulaire
champs	Objet	vrai	---	Objet qui décrit la structure des éléments du formulaire, par exemple { name: { label: 'name', length: 20, type: String, options: [{ label: 'Mike', value: 'Mike' }] }
règles	Objet	FAUX	---	Objet qui décrit les règles des éléments de formulaire, par exemple { name: [{ required: true, message: 'name is required.' }] }
taille	Chaîne	FAUX	'large'	Dimensionnez la boîte de dialogue 'full' , 'large' , ou small , ou omise.
largeurétiquette	Chaîne	FAUX	'100px'	Largeur de l'étiquette du formulaire et du tableau.
en ligne	Booléen	FAUX	false	Déterminez si les éléments de formulaire sont en ligne ou non.
tableau	Objet	FAUX	---	Si la structure de la table n'est pas conforme à la structure du formulaire, vous pouvez la spécifier, par exemple { name: 'name' } .
actes	Tableau	FAUX	['create', 'destroy', 'update']	Les actions cruelles.
chargement	Booléen	FAUX	false	CRUD est dans l'état XHR. Le bouton Soumettre a été désactivé s'il est vrai.
mettre en surbrillanceCurrentRow	Booléen	FAUX	false	Mettez en surbrillance ou non la ligne actuelle du tableau.
style de ligne	Fonction	FAUX	---	Fonction de style de ligne de tableau. Function(row, index)

événements	description
ouvrir	événement d'ouverture de boîte de dialogue. définissez editing sur true pour afficher la boîte de dialogue.
fermer	événement de fermeture de boîte de dialogue. définissez editing sur false pour fermer la boîte de dialogue.
créer	événement de création de formulaire. Vous devez attribuer un modèle de formulaire au form .
mise à jour	événement de mise à jour du formulaire (row, index) transmis au gestionnaire. Vous devez attribuer une ligne au form .
détruire	Événement de destruction de ligne de table (row, index) transmis au gestionnaire.
soumettre	événement de soumission de formulaire (status, closeDialog) transmis au gestionnaire. 0 signifie création et 1 signifie mise à closeDialog est une fonction.
développer	Événement d'expansion de table (row, expanded) transmis au gestionnaire. Voir les événements de table element-ui.
clic sur la ligne	Événement de clic sur la ligne de la table (row, event, column) transmis au gestionnaire. Voir les événements de la table element-ui.
ligne-dblclick	Événement dblclick de ligne de table. (row, event) transmis au gestionnaire. Voir les événements de table element-ui.

machines à sous	description
indice	Emplacement d'index de ligne de table. Voir Emplacements de table element-ui.
développer	Emplacement d'extension de table. Voir Emplacements de table element-ui.
ajouter un préfixe	Emplacement de pré-ajout de table.
défaut	Emplacement d'ajout de table.
Ajouter sur	Emplacement pour module complémentaire de formulaire.

Votre modèle peut ressembler à ceci.

 <crud :data="data" :form="form" :rules="rules" :fields="fields" inline index
    :editing="editing" @open="handleOpen" @close="handleClose"
    @create="handleCreate" @update="handleUpdate" @destroy="handleDestroy" @submit="handleSubmit"/>

Voici un mixin simple qui peut vous aider à l'amorcer. Importez simplement Simple .

 import { Simple } from 'vue-element-crud'

export {
  mixins : [ Simple ]
} 

Contribuer

Si vous avez des idées sur ce composant, n'hésitez pas à nous le faire savoir. Vous pouvez créer un nouveau numéro pour l'améliorer.