el data tree
v0.8.0
axios verwenden, um automatisch Anfragen zu senden, Filterung zu unterstützen, Aktionsspalten anzupassen und RESTful CRUD einfacher zu machen?
中文文档
el-data-tree 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 ? type = 1 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-tree v-bind =" treeConfig " > </ el-data-tree >
</ template > < script >
export default {
data ( ) {
return {
treeConfig : {
url : '/example/users' ,
dataPath : 'data.payload' ,
showFilter : true ,
form : [
{
$type : 'input' ,
$id : 'name' ,
label : '用户名' ,
$el : {
placeholder : '请输入'
} ,
rules : [
{
required : true ,
message : '请输入用户名' ,
trigger : 'blur'
}
]
}
]
}
}
}
}
</ script >Die Ergebnisse sind wie folgt:
⬆ Zurück nach oben
⬆ Zurück nach oben
⬆ Zurück nach oben
Diese Komponente ist abhängig von element-ui und @femessage/el-form-renderer und axios
Stellen Sie sicher, dass Sie es in Ihrem Projekt installiert haben
yarn add element-ui @femessage/el-form-renderer axios⬆ Zurück nach oben
Empfehlen Sie die Verwendung von Garn zur Installation
yarn add @femessage/el-data-tree⬆ 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 ElDataTree from '@femessage/el-data-tree'
import ElFormRenderer from '@femessage/el-form-renderer'
import {
Button ,
Dialog ,
Dropdown ,
DropdownMenu ,
DropdownItem ,
Form ,
FormItem ,
Input ,
Loading ,
Tree ,
MessageBox ,
Message
} from 'element-ui'
Vue . use ( Button )
Vue . use ( Dialog )
Vue . use ( Dropdown )
Vue . use ( DropdownMenu )
Vue . use ( DropdownItem )
Vue . use ( Form )
Vue . use ( FormItem )
Vue . use ( Input )
Vue . use ( Loading . directive )
Vue . use ( Tree )
Vue . component ( 'el-form-renderer' , ElFormRenderer )
Vue . component ( 'el-data-tree' , ElDataTree )
// to show confirm before delete
Vue . prototype . $confirm = MessageBox . confirm
// if the tree component cannot access `this.$axios`, it cannot send request
import axios from 'axios'
Vue . prototype . $axios = axios⬆ Zurück nach oben
< template >
< el-data-tree ></ el-data-tree >
</ template >⬆ Zurück nach oben
Alvin | erheben ? ? | Kalter Stein | EVILLT ? | Donald Shen ? | ColMugX ? | OuZuYu ? |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen!
⬆ Zurück nach oben
MIT
⬆ Zurück nach oben
