ele easy table herunterladen - ele easy table Quellcode herunterladen

ele easy table

Andere Kategorien

1.0.0

Herunterladen

ele-easy-table

Installieren

 npm install ele-easy-table -S

einführen

 import 'ele-easy-table'

Code-Demo

 <ele-easy-table :form="form" :table="table" :formData.sync="formData" @getList="handleSearch"></ele-easy-table>

Einzelheiten finden Sie im Demo-Quellcode

Beachten

Abhängig von Element-UI muss Ihr Projekt Element-UI installieren

Vom Quellcode verwendete Element-UI-Version

 "element-ui": "^2.4.5"

API

Requisiten

Eigentum	veranschaulichen	Typ	Standardwert
bilden	Bedingungsbereich für Tabellenabfrage	Objekt	{}
Tisch	Tischanzeigebereich	Objekt	{}
formData.sync	Formularabfragefelder	Objekt	{}
Pagination	Ob der Seitenbereich angezeigt werden soll	[Boolean,Objekt]	WAHR
andere Attribute	Native Eigenschaften von el-table	Siehe native Eigenschaften von el-table	-

Formularunterkonfigurationselement

Eigentum	veranschaulichen	Typ	Standardwert	Bemerkung
Klasse	Einstellung für den Bedingungsbereichsstil der Tabellenabfrage	Objekt	-	-
Stil	Inline-Stileinstellung für den Bedingungsbereich der Tabellenabfrage	Objekt	-	-
FoldNum	Die Tabelle wird ausgeblendet, wenn mehr als viele Abfragebedingungen vorhanden sind	Nummer	-	Ohne diesen Parameter werden alle angezeigt
Liste	Liste der Tabellenabfragebedingungen	Array	-	Einzelheiten finden Sie im Demo-Quellcode

Tabellenunterkonfigurationselement

Eigentum	veranschaulichen	Typ	Standardwert	Bemerkung
Liste	Tabellendatenliste	Array	-	-
Spalten	Tabellenkopfliste	Array	-	Einzelheiten finden Sie im Demo-Quellcode
wird geladen	Ob die Animation zum Laden der Tabelle angezeigt werden soll	Boolescher Wert	-
showIndex	Ob die Spalte mit der Seriennummer angezeigt werden soll	Boolescher Wert	WAHR
indexFixed	Ob die Seriennummernspalte korrigiert werden soll	Boolescher Wert	FALSCH
indexLabel	Passen Sie den Kopftext der Seriennummernliste an	Zeichenfolge	Seriennummer
Auswahl	Bilden Sie eine Mehrfachauswahlkonfiguration	Objekt	{}

Auswahl-Unterkonfigurationselement

Eigentum	veranschaulichen	Typ	Standardwert	Bemerkung
config	Bilden Sie mehrere Auswahleigenschaften	Objekt	-	-

Unterkonfigurationselement für die Paginierung

Natives Attribut „el-pagination“.

Methoden

@getList()

Wird ausgeführt, wenn die Seitennummer geändert wird oder sich die auf jeder Seite angezeigte Nummer ändert, werden die Daten abgerufen und dann table.list zugewiesen, um die Liste zu aktualisieren.

andere Elementtabellenereignisse

Native el-table-Ereignisse, zum Beispiel: @selection-change="handleSelectionChange" Weitere Informationen finden Sie im Demo-Quellcode

Geschichte

v1.1.3

1. Tabellen-Mehrfachauswahlkonfiguration hinzugefügt
2. Verwenden Sie v-bind="$attrs" v-on="$listeners", um native el-table-Attribute zu transplantieren
Einzelheiten zur Verwendung finden Sie unter ele-easy-table-demo

v1.1.4

Die el-Pagination-Komponente fügt native Konfigurationselemente hinzu

v1.1.5

Fügen Sie benutzerdefinierten Header-Inhalt hinzu

v1.1.6

Optimierung der Anzeigebedingungen für Tabellenseriennummern

v1.1.7

Eingabefeld zur Unterstützung des Abfrageformulars zur Schlüsseleingabe hinzugefügt

v1.1.8

Fehler bei der Anzeige der Seriennummer der Tabelle behoben

v1.1.9

Es wurde ein Fehler bei der Anzeige von Tabellenseriennummern behoben, wenn kein Umblättern erfolgt.

v1.2.0

Abfragebedingungen unterstützen das Falten

v1.2.1

Abfragebedingungen für Slot-Typen unterstützen die Konfiguration, ob gefaltet werden soll oder nicht

v1.2.2

Das Tabellen-HandleClick-Ereignis unterstützt den zweiten Parameterbereich, der Daten von Zeile, Spalte, $index und Speicher abrufen kann (Zustandsverwaltung innerhalb der Tabelle). Informationen zur Verwendung finden Sie im Demo-Quellcode.

v1.2.3

handleExpand-Ereignis hinzugefügt (Rückrufereignis nach bedingter Faltung)

Ereignis	veranschaulichen	Parameter
handleExpand	Rückrufereignis nach bedingter Faltung	isExpand

Die Tabelle verfügt über einen neuen Inline-Stil-Überlauf: sichtbar; um ein Sticky-Layout des Tabellenkopfes zu implementieren, fügen Sie einfach den folgenden Stil hinzu
Hinweis: Wenn es sich um einen bereichsbezogenen Stil handelt, müssen Sie den Operator >>> verwenden (Einzelheiten finden Sie im Dokument CSS-Bereich).
```
 /* 全局样式 */
. el-table__header-wrapper {
  position : sticky;
  top : 0 ;
  z-index : 999 ;
}
/* scoped 局部样式 */
. ele-easy-table-demo > > > . el-table__header-wrapper {
  position : sticky;
  top : 0 ;
  z-index : 999 ;
}
```
Einzelheiten finden Sie im Demo-Quellcode
Hinweis: Es kann nicht gleichzeitig mit der Spaltenfixierung verwendet werden, Sie können das native Tabellenattribut des Elements verwenden, um die Tabellenhöhe festzulegen.

v1.2.4

Abfragebedingungen unterstützen die Konfiguration von Platzhaltern

v1.2.5

Benutzerdefinierte Ereignisse werden stattdessen mit „kebab-case“ benannt. Weitere Informationen finden Sie auf der offiziellen Website von vuejs – benutzerdefiniertes Ereignis#Ereignisname