el table plus

el-tisch-plus

Konfigurierbare Komponenten basierend auf el-table

Hintergrund: Bei Verwendung des Elements el-table muss zu viel Template-Code geschrieben werden, was zu zu viel HTML-Code auf der Seite führt. Betrachtet man die Elementkomponentenbibliothek aus der Anwendungsschicht, ist das API-Design zwar sehr flexibel, aber sehr umständlich zu verwenden. Daher muss el-table gepackt werden, um die zugehörigen Konfigurationen zu vereinfachen.

Das API-Design der Anwendungsschicht ist relativ gut. Das el-table-plus-API-Design bezieht sich auf die Tabellenkomponente antd-design-vue. Gleichzeitig unterstützen alle Attribute/Ereignisse die ursprüngliche Elementtabellenkomponente, wodurch die ursprüngliche API nicht zerstört wird (kein Eingriff); sie unterstützt auch die Slot/jsx/h-Funktion, um das Rendern von Spaltendaten auf drei Arten anzupassen, um benutzerdefinierte Ergebnisse zu erzielen Das Rendern der Geschäftslogik ist ebenfalls integriert. Häufig verwendete Paginierungskomponenten und erweiterte APIs helfen dabei, gängige Geschäfte bequem abzuwickeln.

Online-Fall

https://lq782655835.github.io/el-table-plus

Merkmale

1. Einfache Verwendung, zur Unterstützung sind nur zwei Attribute „Daten“ und „Spalte“ erforderlich
2. Vollständige Vererbung, vollständige Attribut-/Ereignisvererbung der Element-UI
3. Hoch skalierbar, unterstützt die Slot/JSX/H-Funktion zum Anpassen der Rendering-Spaltendaten auf drei Arten
4. Bequemer: Erweitern Sie das Scroll-Ereignis, die Paginierungskomponente und die fn-Schnellformatierung

Installation und Einführung

Installieren

yarn add @springleo/el-table-plus

einführen

Diese Komponente hängt von der El-Table-Komponente von Element-UI ab und muss von Ihnen selbst eingeführt werden.

 import ElementUI from "element-ui" ;
import "element-ui/lib/theme-chalk/index.css" ;
Vue . use ( ElementUI ) ;

import ElTablePlus from '@springleo/el-table-plus'
Vue . use ( ElTablePlus ) 

Grundlegende Verwendung

 < template >
    < el-table-plus
      :data =" list "
      :columns =" [
        { label: 'ID', value: 'id', width: '80px' },
        { label: '存储卷名', value: 'name' },
        { label: '总容量', value: 'storage', fn: val => `${val}G` },
        { label: '创建人', value: 'member.userId' },
        { label: '邮箱', value: 'member.email' },
        { label: '创建时间', value: 'gmtCreate' }
      ] "
    />
</ template > 

API

el-table-plus-Attribut

Unterstützt alle Originalattribute auf el-table und erweitert die folgenden APIs.

Parameter	Typ	Standardwert	veranschaulichen
Laden	Boolescher Wert	FALSCH	Animation wird geladen
Daten	Array	[]	Daten auflisten
Spalten	Array	[]	Konfigurationsliste für Spaltenelemente, Einzelheiten finden Sie unten in den Spaltenattrs
Pagination	Objekt		Pageturner-Konfiguration, nicht standardmäßig eingestellt, Pageturner wird nicht angezeigt. Verwandte APIs finden Sie in el-pagination
gesamt	Nummer	0	Gesamtzahl der Pageturner

el-table-plus-Event

Unterstützt alle Originalereignisse auf el-table und erweitert die folgenden APIs.

Veranstaltungsname	veranschaulichen	Beschreibung
scrollen	Ereignis der Tabellenlaufleiste	e
Seitenwechsel	Pageturner-Wechselereignis	{ pageSize, currentPage }

Spaltenattribut

Unterstützt alle Originalattribute und Scoped Slot von el-table-column und erweitert die folgenden APIs:

Attr	Typ	Standard	Beschreibung
Etikett	Zeichenfolge		Spaltenname
Stütze	Zeichenfolge		Spaltendatenfelder unterstützen die Verschachtelung von Objekten auf mehreren Ebenen, z. B. user.email.prefix
versteckt	Boolescher Wert		Ob diese Spalte ausgeblendet werden soll. Der Vorschlag ist ein berechneter Vorschlag, der ein reaktionsfähiges Anzeigen und Ausblenden ermöglicht.
customRender	Funktion		Benutzerdefiniertes Spaltendatenrendering. Funktionsparameter (Wert, Zeile, Spalte, $index, h) unterstützen jsx- und h-Funktionen
benutzerdefinierter Titel	Funktion		Benutzerdefiniertes Rendern von Spaltenüberschriften. Funktionsparameter (Spalte, $index, h) unterstützen jsx- und h-Funktionen
ScopedSlots	Objekt		Verwenden Sie den Slot-Modus, um das Rendering anzupassen und die Funktion „customRender/customTitle“ zu ersetzen. Zum Beispiel: { customRender: 'slotName1', customTitle: 'slotName2' }

Vue-Plugin-Serie

Plugin	Status	Beschreibung
@springleo/el-dialog-helper		Versprechen Sie Dialoge in Vue!
@springleo/el-table-plus		Konfigurierbare Komponenten basierend auf el-table
@springleo/el-form-plus		Schema-Formular basierend auf Element-UI-Formular
@springleo/virtual-scroll-table		Unendliche Dropdown-Komponente für virtuelle Scrolltabellen

Lizenz

MIT