el data tree
v0.8.0
Utiliser axios pour envoyer automatiquement des requêtes, prendre en charge le filtrage, personnaliser les colonnes d'action et simplifier RESTful CRUD ?
中文文档
el-data-tree est créé pour résoudre des problèmes commerciaux, donc la logique CRUD est définie à l'intérieur.
Par exemple, pour développer une API user , supposons que son chemin relatif ressemble à ceci :
/api/v1/usersL'API CRUD reposante devrait être :
GET / api / v1 / users ? type = 1 POST / api / v1 / users PUT / api / v1 / users / : id DELETE / api / v1 / users / : idIl suffit ensuite d'utiliser le code suivant pour compléter les fonctions CRUD
< 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 >Les résultats sont les suivants :
⬆ Retour en haut
⬆ Retour en haut
⬆ Retour en haut
Ce composant peerDependencies sur element-ui et @femessage/el-form-renderer et axios
assurez-vous d'avoir installé dans votre projet
yarn add element-ui @femessage/el-form-renderer axios⬆ Retour en haut
Encouragez à utiliser du fil pour installer
yarn add @femessage/el-data-tree⬆ Retour en haut
Ceci est pour des raisons de minification : de cette manière, en créant votre application, votre webpack ou autre bundler, regroupez simplement les dépendances dans un seul fournisseur pour toutes les pages qui utilisent ce composant, au lieu d'un seul fournisseur pour une page.
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⬆ Retour en haut
< template >
< el-data-tree ></ el-data-tree >
</ template >⬆ Retour en haut
Alvin | prélèvement ? ? | Pierre froide | LE MAL ? | Donald Shen ? | ColMugX ? | OuZuYu ? |
Ce projet suit la spécification de tous les contributeurs. Les contributions de toute nature sont les bienvenues !
⬆ Retour en haut
MIT
⬆ Retour en haut
