elsa vue

Elsa

⚡ elsa (eleme simple admin) basiert auf element-ui und kapselt el-form, el-table und andere Komponenten und eignet sich für die schnelle Entwicklung von Backend-Management-Projekten.

Anwendungsbeispiele finden Sie unter: Beispiel

Schnellstart

 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 ) 

Besonderheit

• else-Karte
  • Unterstützt die Einstellung von Haupt- und Untertiteln
• else-Tabelle
  • Konfigurierbare Listenspalten
  • Unterstützt die Paging-Steuerung
  • Unterstützt die baumförmige Datenanzeige und verzögertes Laden
• Elsa-Form
  • Unterstützte Formularkomponenten
    • el-Eingang
    • El-Radio
    • el-Kontrollkästchen
    • el-wählen
    • el-upload
    • el-xxx-picker
  • Benutzerdefiniertes Layout
  • Formularprüfsumme zurückgesetzt
  • Parsen verschachtelter Objekte
  • Einstellung für die allgemeine Deaktivierung des Formulars
  • Tippinformationen für Formularelemente
  • Formularelemente: dynamisch/verknüpft
    • deaktiviert/aktiviert
    • ein-/ausblenden
    • Ändern Sie mehrere Optionen dynamisch

Elsa-Tisch

Verwendung:

1. Rufen Sie die Datenquelle dataSource vom Typ Array ab
2. Konfigurieren Sie die angezeigten Spalteninformationen basierend auf den Objekteigenschaften in der dataSource.
3. Legen Sie die Paginierungsparameter für die Paginierung fest

 < 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 => { }
      }
    }
  }
}

ElsaTable-Attribute

Parameter	veranschaulichen	Typ	Optionaler Wert	Standardwert
Spalten	Spalteninformationen	Array
Datenquelle	Datenquelle	Array
Pagination	Informationen zur Paginierung	Objekt
...elProps	el-table-Attribut

ElsaTable.columns

Parameter	veranschaulichen	Typ	Optionaler Wert	Standardwert
Typ	Mit der Auswahl wird eine Auswahlfeldspalte hinzugefügt Index fügt Seriennummernspalte hinzu erweitern Mehr anzeigen	Zeichenfolge	Auswahl/Index/Erweitern
Etikett	Titel	Zeichenfolge
Stütze	Felder analysieren	Zeichenfolge
Breite	Entsprechende Spaltenbreite	Zeichenfolge
behoben	Unabhängig davon, ob die Spalte links oder rechts fixiert ist, bedeutet true, dass sie links fixiert ist	String/Boolescher Wert	wahr, links, rechts
Formatierer	Datenformatierung	Funktion(Zeile, Spalte, Zellwert)
Überlauf-Tooltip anzeigen	Tooltip anzeigen, wenn der Inhalt zu lang ist und ausgeblendet wird	Boolescher Wert

Weitere Einzelheiten finden Sie unter: el-table-Spalte

ElsaTable.elProps

Parameter	veranschaulichen	Typ	Optionaler Wert	Standardwert
Daten	Durch dataSource ersetzen
Grenze	Ob vertikale Ränder vorhanden sein sollen	Boolescher Wert		FALSCH
Größe	Größe	Zeichenfolge	mittel/klein/mini
fit	Ob die Breite der Säule selbsttragend ist	Boolescher Wert		WAHR

Weitere Einzelheiten finden Sie unter: el-table-Attribute

ElsaTable-Ereignisse

Parameter	veranschaulichen	Typ	Optionaler Wert	Standardwert
Auswahl-Änderung	Dieses Ereignis wird ausgelöst, wenn sich die Auswahl ändert	Funktion(Auswahl)

Weitere Einzelheiten finden Sie unter: el-table-Veranstaltungen

? Hinweis: Einige Ereignisse sind aufgrund der aktuellen Dateistruktur schwer zu implementieren (z. B. Sortieren, Filtern, Zusammenführen von Formularen usw.) und können durch Definieren des Inhalts der Konfigurationsdatei in Daten (anstelle der Importmethode) implementiert werden )

Elsa-Form

Verwendung:

1. Definieren Sie das Formulardatenmodellmodell
2. Konfigurieren Sie das Formularfeld und definieren Sie das Layout (optional)

 < 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 : ''
      }
    }
  }
}

ElsaForm-Attribute

Parameter	veranschaulichen	Typ	Optionaler Wert	Standardwert
config	Formularelementkonfiguration	Objekt
Modell	Formulardatenmodell	Objekt
Layout	Formularlayout	Array
deaktiviert	Das gesamte Formular ist deaktiviert	Boolescher Wert		FALSCH
...elProps	Formularelementkonfiguration	Objekt

ElsaForm.config

Parameter	veranschaulichen	Typ	Optionaler Wert	Standardwert
Feld	Formularelementfelder, die Modellattributen entsprechen	Objekt
field.label	Name	Zeichenfolge
field.elTag	Element-Formular-Tag	Zeichenfolge	el-input/select/radio/cascader/date-picker/time-picker/upload
field.elAttrs	Formularelementattribute (siehe entsprechende elTag-Komponente)	Objekt
field.elStyle	Stil des Formularelements	Objekt
Feld.extra	Schnelle Nachricht	Zeichenfolge
field.extraIcon	Symbol für Aufforderungsnachricht	Zeichenfolge		el-icon-warning-outline
Feldregeln	Formularvalidierungsregeln	Array
Feldoptionen	Wenn dies aktiviert ist, wird die Auswahl als Datenanzeige verwendet	Array
Feld.sichtbar	Durch die Verknüpfung können Sie die Anzeige und das Ausblenden je nach Modell steuern[abgelegt]	Boolescher Wert/String/Funktion({model})
field.customRender	Vorlage wird auf der rechten Seite von elTag angezeigt	Zeichenfolge
field.slotRender	Vorlage im elTag (zum Beispiel: Inhalt im Upload)	Zeichenfolge

Weitere Einzelheiten finden Sie unter: el-form-item-Methoden

ElsaForm.field.elAttrs

Beispiel einiger besonderer Eigenschaften

Parameter	veranschaulichen	Typ	Optionaler Wert	Standardwert
deaktiviert	Deaktivieren	Funktion({Modell})/ Boolescher Wert
isRemote	elTag ist das verzögerte Laden von el-select	Boolescher Wert
remoteMethod	elTag ist das verzögerte Laden von el-select	Function(done,{model}) / Boolean
faul	elTag ist das verzögerte Laden von El-Cascader	Boolescher Wert
lazyLoad	elTag ist das verzögerte Laden von El-Cascader	Funktion(Knoten, Auflösung, { erledigt }) / Boolescher Wert

ElsaForm.layout

Parameter	veranschaulichen	Typ	Optionaler Wert	Standardwert
elTag	Element-Formular-Tag	Zeichenfolge	el-Zeile/Spalte
elAttrs	Formularelementattribute (siehe entsprechende elTag-Komponente)	Objekt
Kinder	Kind	Objekt
Feld	Formularelementfelder	Zeichenfolge

ElsaForm.elProps

Parameter	veranschaulichen	Typ	Optionaler Wert	Standardwert
Etikettenbreite	Die Breite der Formularfeldbeschriftung	Zeichenfolge
Etikettensuffix	Suffix für Formularfeldbeschriftungen	Zeichenfolge
Größe	Größe	Zeichenfolge	mittel/klein/mini

Weitere Einzelheiten finden Sie unter: el-form-Attribute

ElsaForm-Methoden

Parameter	veranschaulichen	Typ	Optionaler Wert	Standardwert
bestätigen	Formulardatenvalidierung	Funktion(Err,Modell)
resetFields	Formularelement zurücksetzen	Funktion(props<Array | String>)
clearValidate	Klare Verifizierungsergebnisse	Funktion(props<Array | String>)

Weitere Einzelheiten finden Sie unter: el-form-Methoden