vue element crud

Leider wird dieses Repository nicht mehr gepflegt. Die Nutzung erfolgt auf eigene Gefahr.

Hinweis: Bei diesem Projekt treten möglicherweise einige Probleme bei der Implementierung von Komponenten auf. Im Laufe der Zeit werden möglicherweise auch die Versionen des Vue-Frameworks und der Element-UI-Bibliothek aktualisiert, die möglicherweise nicht für die Gegenwart und Zukunft geeignet sind.

vue-element-crud

Eine umschlossene Vue-CRUD-Komponente basierend auf den berühmten Vue-UI-Komponenten – element-ui.

Eine Komponente zum Hinzufügen, Löschen, Ändern und Überprüfen basierend auf element-ui -Komponenten.

Hier ist eine einfache Demo.

Sie können die Beispiele und die Quellcodedatei Crud.vue im Projekt lesen, um die spezifische Verwendung der Komponente zu verstehen.

Lokale Entwicklung

Sie können dieses Repository so lange herunterladen oder klonen, wie Sie möchten. Anschließend können Sie npm-Skripte ausführen

$ npm install
$ npm run dev

Öffnen Sie ein neues Terminal,

$ npm run build:watch

Verwendung

Sie können vue-element-crud als Vue-Plugin oder als Vue-Komponente verwenden.

Wenn Sie es als Komponente behandeln möchten, können Sie CRUD als Komponenten importieren.

Als Komponente

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

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

Andernfalls können Sie es als Plugin behandeln.

Als Plugin

Schritt 1: Projekt initiieren

Möglicherweise müssen Sie ein Vue-Projekt initiieren oder ein vorhandenes verwenden, um fortzufahren, da für Element-UI ein Vue-Loader, Babel-Loader oder CSS-Loader erforderlich ist.

$ vue init webpack < project-name > 

Schritt 2: Installieren

Diese Komponente ist von element-ui abhängig und element-ui wird automatisch installiert, wenn Sie vue-element-crud installieren, sodass Sie element-ui nicht zusätzlich installieren müssen.

$ npm install -S vue-element-crud

Schritt 3: Vue-Nutzung

Fügen Sie diese Zeilen unten zu Ihrer main.js hinzu

 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 ) 

Schritt 4: Siehe Beispiele

Sie können die Dokumente oder Beispiele lesen, um herauszufinden, wie Sie Requisiten und Methoden dieses Vue-Element-Cruds implementieren.

API

Requisiten	Typ	erforderlich	Standard	Beschreibung
Daten	Array	WAHR	---	Tabellendatenarray
bilden	Objekt	WAHR	---	Formularobjekt zum Speichern von Formularelementvariablen
Felder	Objekt	WAHR	---	Objekt, das die Struktur von Formularelementen beschreibt. Beispiel { name: { label: 'name', length: 20, type: String, options: [{ label: 'Mike', value: 'Mike' }] }
Regeln	Objekt	FALSCH	---	Objekt, das Formularelementregeln beschreibt, z. B. { name: [{ required: true, message: 'name is required.' }] }
Größe	Zeichenfolge	FALSCH	'large'	Größe des Dialogs: 'full' , 'large' , „ small “ oder „weggelassen“.
Etikettenbreite	Zeichenfolge	FALSCH	'100px'	Beschriftungsbreite von Formular und Tabelle.
im Einklang	Boolescher Wert	FALSCH	false	Bestimmen Sie, ob Formularelemente inline verfügbar sind oder nicht.
Tisch	Objekt	FALSCH	---	Wenn die Tabellenstruktur nicht der Formularstruktur entspricht, können Sie sie angeben, z. B. { name: 'name' }
Aktionen	Array	FALSCH	['create', 'destroy', 'update']	Die grausamen Taten.
Laden	Boolescher Wert	FALSCH	false	CRUD befindet sich im XHR-Status. Die Schaltfläche „Senden“ wurde deaktiviert, wenn „true“ lautet.
HighlightCurrentRow	Boolescher Wert	FALSCH	false	Heben Sie die aktuelle Tabellenzeile hervor oder nicht.
rowStyle	Funktion	FALSCH	---	Funktion für Tabellenzeilenstil Function(row, index)

Ereignisse	Beschreibung
offen	Dialog-Öffnungsereignis. Setzen Sie editing auf „True“, um den Dialog anzuzeigen.
schließen	Dialog-Schließereignis. Setzen Sie editing auf „false“, um den Dialog zu schließen.
erstellen	Formularerstellungsereignis Sie müssen dem form ein Formularmodell zuweisen.
aktualisieren	Formularaktualisierungsereignis (row, index) das an den Handler übergeben wird. Sie müssen dem form eine Zeile zuweisen.
zerstören	Ereignis zur Zerstörung von Tabellenzeilen (row, index) , das an den Handler übergeben wird.
einreichen	Formular-Submit-Ereignis (status, closeDialog) closeDialog an den Handler übergeben wird, steht für das Erstellen 1 0 das Aktualisieren.
expandieren	Tabellenerweiterungsereignis (row, expanded) das an den Handler übergeben wird. Siehe Element-UI-Tabellenereignisse.
Zeilenklick	Tabellenzeilen-Klickereignis (row, event, column) das an den Handler übergeben wird. Siehe Element-UI-Tabellenereignisse.
row-dblclick	Tabellenzeilen-Dblclick-Ereignis (row, event) , das an den Handler übergeben wird. Siehe Element-UI-Tabellenereignisse.

Slots	Beschreibung
Index	Tabellenzeilenindex-Slot. Siehe Element-UI-Tabellenslots.
expandieren	Tabellenerweiterungssteckplatz. Siehe Element-UI-Tabellensteckplätze.
voranstellen	Tabellenplatz voranstellen.
Standard	Steckplatz für Tabellenanhänge.
hinzufügen Auf	Formular-Add-On-Slot.

Ihre Vorlage könnte so aussehen.

 <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"/>

Hier ist ein einfaches Mixin, das Ihnen beim Bootstrap helfen kann. Einfach Simple importieren.

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

export {
  mixins : [ Simple ]
} 

Beitragen

Wenn Sie Ideen zu dieser Komponente haben, teilen Sie uns dies bitte mit. Sie können eine neue Ausgabe erstellen, um sie zu verbessern.