el data table
v1.23.2
La requête automatique par axios , prend en charge la pagination, la structure de données arborescente, la recherche personnalisée, la colonne d'opération personnalisée, ce qui facilite le repos de l'API ?
Le tableau utilise @femessage/el-form-renderer pour restituer le formulaire.
中文文档
el-data-table 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 ? page = 1 & size = 10structure de données par défaut
{
"code" : 0 ,
"msg" : "ok" ,
"payload" : {
"content" : [ ] , // dataPath
"totalElements" : 2 , // totalPath
}
}Vous pouvez personnaliser dataPath/totalPath.
Si hasPagination=false , dataPath par défaut est payload
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-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 >Les résultats sont les suivants :
Récupérer
Créer
Mise à jour
Supprimer
⬆Retour en haut
Déplacer le contenu du modèle vers le script signifie que le modèle peut être réduit et que js peut être extrait dans un autre fichier pour être réutilisé. Dans le même temps, les données dans js sont en fait un morceau de json, cela signifie que l'outil de génération de code peut vous aider.
⬆Retour en haut
Pourquoi créez-vous el-data-table basé sur el-table de element-ui ?
J'entends souvent les sons suivants :
Tout d'abord, je dois dire qu'el-table est vraiment flexible, mais lors de l'implémentation des requêtes de pagination, seul el-table ne suffit pas et le composant el-pagination doit être combiné. La majeure partie du contenu du traitement de pagination est répétée. Sans un composant métier de haut niveau, nous obtenons du code en double partout.
En fait, dans l'application Web d'administration ou de tableau de bord, il existe de nombreuses opérations CRUD, utilisant l'API restful. Il est possible d'utiliser une seule URL pour créer un composant permettant de compléter les fonctions CRUD.
Deuxièmement, de nombreux développeurs expérimentés pensent que les composants sont plus flexibles, mieux c'est.
Cependant, les « débutants » qui manquent d’expérience ne sont pas familiers avec les scénarios commerciaux courants. Certaines opérations de base, comme la validation de formulaire, le filtrage d'espace, l'ajout de chargement, la gestion des exceptions, peuvent être oubliées, ce qui entraîne des bugs.
Pour les développeurs commerciaux de première ligne, face à des tâches de développement sans fin, en fait, ils ne veulent pas avoir à faire face à une logique métier répétée. ils veulent juste se libérer les mains et quitter le travail plus tôt.
Dans une telle situation, el-data-table est né.
⬆Retour en haut
⬆Retour en haut
⬆ Retour en haut
Encouragez l'utilisation de Yarn pour l'installation
yarn add @femessage/el-data-table⬆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 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 >⬆Retour en haut
⬆Retour en haut
Pour ceux qui souhaitent contribuer à ce projet, tels que :
Veuillez vous référer à notre guide de contribution.
⬆ Retour en haut
Merci à ces personnes merveilleuses (clé emoji) :
prélèvement ? ? ? | Donald Shen | MiffyCooper | Huanfeng Chen | LE MAL ? | Alvin ? | Han ? |
Kunzhijia ? | Edgar ? | Barretem | 阿禹。 | lujunwei | cjf ? | Jack-arc-en-ciel ? |
ColMugX | enneigé | Éponge ? | 4Arche | Htongbing | PPPenny | Boîte de dialogue contextuelle ? |
Jogiteur | yolofit ? | huazaili ? |
Ce projet suit la spécification de tous les contributeurs. Les contributions de toute nature sont les bienvenues !
MIT
⬆Retour en haut
