el data table
v1.23.2
Automatische Anforderung durch axios , unterstützt Paginierung, Baumdatenstruktur, benutzerdefinierte Suche, benutzerdefinierte Operationsspalte, was die Rest-API einfach macht?
Die Tabelle verwendet @femessage/el-form-renderer zum Rendern des Formulars.
中文文档
el-data-table wird erstellt, um Geschäftsprobleme zu lösen, daher ist darin CRUD-Logik festgelegt.
Um beispielsweise user API zu entwickeln, nehmen wir an, dass der relative Pfad wie folgt aussieht:
/ api / v1 / usersDie erholsame CRUD-API sollte sein:
GET / api / v1 / users ? page = 1 & size = 10Standarddatenstruktur
{
"code" : 0 ,
"msg" : "ok" ,
"payload" : {
"content" : [ ] , // dataPath
"totalElements" : 2 , // totalPath
}
}Sie können dataPath/totalPath anpassen.
Wenn hasPagination=false , ist dataPath standardmäßig payload
POST / api / v1 / users PUT / api / v1 / users / : id DELETE / api / v1 / users / : idDann müssen Sie nur noch den folgenden Code verwenden, um die CRUD-Funktionen abzuschließen
< template >
< el-data-table v-bind =" tableConfig " > </ el-data-table >
</ template > < script >
export default {
data ( ) {
return {
tableConfig : {
url : '/example/users' ,
columns : [
{
prop : 'name' ,
label : '用户名'
}
] ,
searchForm : [
{
type : 'input' ,
id : 'name' ,
label : '用户名' ,
el : {
placeholder : '请输入'
}
}
] ,
form : [
{
type : 'input' ,
id : 'name' ,
label : '用户名' ,
el : {
placeholder : '请输入'
} ,
rules : [
{
required : true ,
message : '请输入用户名' ,
trigger : 'blur'
}
]
}
]
}
}
}
}
</ script >Die Ergebnisse sind wie folgt:
Abrufen
Erstellen
Aktualisieren
Löschen
⬆Zurück nach oben
Durch das Verschieben des Inhalts der Vorlage in das Skript kann die Vorlage reduziert und js zur Wiederverwendung in eine andere Datei extrahiert werden. Gleichzeitig sind die Daten in js tatsächlich ein Teil von json, was bedeutet, dass ein Codegenerierungstool hilfreich sein kann.
⬆Zurück nach oben
Warum erstellen Sie eine El-Datentabelle basierend auf der El-Tabelle von Element-UI?
Ich höre oft folgende Geräusche:
Zunächst muss ich sagen, dass el-table sehr flexibel ist, aber bei der Implementierung von Paging-Anfragen reicht nur el-table nicht aus und die el-Paginierungskomponente muss kombiniert werden. Der größte Teil des Inhalts der Paging-Verarbeitung wird wiederholt. Ohne eine Geschäftskomponente auf hoher Ebene erhalten wir überall doppelten Code.
Tatsächlich gibt es in der Admin- oder Dashboard-Webanwendung viele CRUD-Vorgänge, die eine Restful-API verwenden. Es ist möglich, nur eine URL zu verwenden, um eine Komponente zur Vervollständigung von CRUD-Funktionen zu erstellen.
Zweitens denken viele erfahrene Entwickler, je flexibler die Komponenten, desto besser.
Allerdings sind die „Neulinge“, denen es an Erfahrung mangelt, nicht mit gängigen Geschäftsszenarien vertraut. Einige grundlegende Vorgänge, wie Formularvalidierung, Platzfilterung, Hinzufügen von Ladevorgängen, Ausnahmebehandlung, werden möglicherweise vergessen, was zu Fehlern führt.
Geschäftsentwickler an vorderster Front möchten sich angesichts endloser Entwicklungsaufgaben tatsächlich nicht mit wiederholter Geschäftslogik befassen. Sie wollen einfach nur ihre Hände frei haben und früher von der Arbeit gehen.
In einer solchen Situation wurde el-data-table geboren.
⬆Zurück nach oben
⬆Zurück nach oben
⬆ Zurück nach oben
Empfehlen Sie die Verwendung von Yarn zur Installation
yarn add @femessage/el-data-table⬆Zurück nach oben
Dies dient der Minimierung: Auf diese Weise bündeln Sie beim Erstellen Ihrer App, Ihres Webpacks oder eines anderen Bundlers einfach die Abhängigkeiten bei einem Anbieter für alle Seiten, die diese Komponente verwenden, und nicht bei einem Anbieter für eine Seite
import Vue from 'vue'
// register component and loading directive
import ElDataTable from '@femessage/el-data-table'
import ElFormRenderer from '@femessage/el-form-renderer'
import {
Button ,
Dialog ,
Form ,
FormItem ,
Loading ,
Pagination ,
Table ,
TableColumn ,
Message ,
MessageBox
} from 'element-ui'
Vue . use ( Button )
Vue . use ( Dialog )
Vue . use ( Form )
Vue . use ( FormItem )
Vue . use ( Loading . directive )
Vue . use ( Pagination )
Vue . use ( Table )
Vue . use ( TableColumn )
Vue . component ( 'el-form-renderer' , ElFormRenderer )
Vue . component ( 'el-data-table' , ElDataTable )
// to show confirm before delete
Vue . prototype . $confirm = MessageBox . confirm
// show tips
Vue . prototype . $message = Message
// if the table component cannot access `this.$axios`, it cannot send request
import axios from 'axios'
Vue . prototype . $axios = axios< template >
< el-data-table ></ el-data-table >
</ template >⬆Zurück nach oben
⬆Zurück nach oben
Für diejenigen, die daran interessiert sind, zu diesem Projekt beizutragen, wie zum Beispiel:
Bitte beachten Sie unseren Beitragsleitfaden.
⬆ Zurück nach oben
Der Dank geht an diese wunderbaren Menschen (Emoji-Taste):
erheben ? ? ? | Donald Shen | MiffyCooper | Huanfeng Chen | EVILLT ? | Alvin ? | Han ? |
kunzhijia ? | Edgar ? | Barretem | 阿禹. | lujunwei | cjf ? | Jack-Regenbogen ? |
ColMugX | schneebedeckt | Schwamm ? | 4Arche | Htongbing | PPPenny | PopupDialog ? |
Jogiter | yolofit ? | huazaili ? |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen!
MIT
⬆Zurück nach oben
