Je n'ai pas mis à jour l'article depuis un certain temps, principalement parce que j'ai été occupé à apprendre de nouvelles choses et j'ai oublié de le partager. J'ai vraiment honte.
Écoutez, j'ai publié un article au milieu de la nuit, partageant un widget Vue appelé Bootpage que j'ai écrit moi-même.
Si vous ne comprenez pas Vue.js, vous pouvez passer à mon article précédent «A Brief Talk sur Vue.js» pour en savoir plus.
Introduction aux composants de BootPage
En fait, ce n'est pas un composant haut de gamme. Au contraire, ce n'est vraiment qu'un simple composant de pagination de table. C'est principalement parce que j'ai besoin d'un composant de pagination de table dans mon projet récent. Les composants de pagination de la bibliothèque officielle de Vue sont trop puissants ou ne me conviennent pas, alors j'en ai écrit un moi-même pour en faire. Peut-être que quelqu'un comme moi a besoin d'un composant de pagination aussi simple pour implémenter des fonctions de pagination simples. Je le partagerai ici et tout le monde remplira les stands.
Si vous avez besoin de composants haut de gamme, vous pouvez passer à la bibliothèque officielle des composants Vue: https://github.com/vuejs/awesome-vue#libraries - Plugins
BootPage est un composant de pagination de table qui prend en charge les données statiques et les données du serveur. Il prend en charge l'ajustement du nombre de lignes affichées sur chaque page et le nombre de pages affichées. Le style est basé sur Bootstrap, tout comme ceci:
Démonstration en ligne: https: //luozhihao.github.io/b ...
Comment utiliser
Dans le fichier de composant .vue, nous écrivons un modèle comme celui-ci, c'est-à-dire le code html:
<Bile> <THEAD> <TR> <TH> ID </ TH> <TH> NAME </ TH> <TH> CONTENU </ TH> <TH> Remarque </th> </tr> </ thead> <tbody> <ttr V-For = "Data in TableLlist"> <Td V-Text = "Data.NUM"> </td> <td V-Text = "Data.Author"> </ TD> v-text = "data.contents"> </td> <td v-text = "data.remark"> </td> </tbody> <tfoot> <tr> <td Colspan = "4"> <v> <Button V-on: click = "Refresh"> Refresh </ Button> </vr> <div> <boot-page: async = "false": data = "lists": lens = lentr " : Page-Len = "Pagelen": param = "param"> </ boot-page> </div> </td> </td> </tfoot> </ table>
Dans la balise <oot-page>, asynchronisé fait référence à l'opportunité d'obtenir des données du côté serveur, FALSE est non; Les données sont un tableau de données tabulaire statique; l'objectif est un tableau de lignes affichées par page; Page-Len est le nombre de pages qui peuvent être affichées;
Code JavaScript qui utilise des données statiques, c'est-à-dire que le contenu de la balise de script est le suivant:
<script> import bootPage from './components/BootPage.vue' export default { data () { return { lenArr: [10, 50, 100], // Display length per pageLen: 5, // Display number of pages that can be displayed: [ {num: 1, author: 'luozh', contents: 'BootPage is a table paging component that supports static data and server data', remark: 'dsds'}, {num: 2, auteur: 'Luozh', contenu: 'Prise en charge pour ajuster le nombre de lignes affichées par page et le nombre de pages affichées. Le style est basé sur bootstrap ', remarque:' dsds '}, {num: 3, auteur:' Luozh ', contenu:' <<boot-page> tag async fait référence à la récupération de données du côté serveur, false est non ', remarque:' dsds '}, {num: 4, authoraire:' Luozh ', contente:' Data est un abri tabulaire statique; '' 'dsds'}, {num: 5, auteur: 'Luozh', contenu: 'Lens est un tableau de lignes affichées par page', remarque: 'dsds'}, {num: 6, auteur: 'Luozh' ', contenu:' Page-Len est le nombre de pages qui peuvent être affichées '' Les paramètres de retour du serveur sont {data: [], page_num: 6}, où les données sont des données tabulaires et Page_num est le nombre total de pages ', Remarque:' dsds '}, {num: 8, auteur:' Luozh ' Utilisez TableList lorsque vous utilisez des données de serveur: [] // Données post-pagination renvoyées par le composant de pagination}}, composants: {bootpage}, événements: {// Données de table renvoyées par le composant de pagination '(données) {this.tableList = data}}} </script>Généralement, nous utilisons rarement des données tabulaires statiques, et la plupart des données des applications sont obtenues du côté serveur, alors voici une méthode pour obtenir des données de pagination du serveur:
Le composant HTML qui utilise les données du serveur est la suivante:
<boot-page v-ref: page: async = "true": lens = "Lenarr": url = "url": page-len = "pagelen": param = "param"> </ boot-page>
où l'URL est l'adresse de demande du serveur; Param est l'objet de paramètre qui doit être envoyé au serveur;
Le code utilisant le serveur JavaScript est le suivant:
<Script> Importer BootPage à partir de './components/bootpage.vue' Export Default {data () {return {Lenarr: [10, 50, 100], // Afficher la longueur par page Set Pagelen: 5, // Nombre de pages qui peuvent être affichées URL: '/ BootPage /', // PATHEAL PATH: {}, // PASS PARAMER TABLET par le composant de pagination}}, méthodes: {refresh () {this. $ reds.page.refresh () // Une fonction de rafraîchissement de table est fournie ici}}, composants: {bootpage}, événements: {// les données de la table renvoyées par le composant de pagination (voici les données renvoyées par le serveur) 'data' (données) {this.tableList = data}, 'Refresh' () {this.refresh ()}}}} </script>Remarque: En plus du contenu du tableau transmis à la table des composants, le serveur a également besoin d'un nom de clé du nombre total de pages, nommé page_num
Les paramètres que le composant sont livrés sur le serveur sont:
{
actif: 1, // numéro de page actuel
Longueur: 5 // Nombre d'affichage par page
}
Les paramètres pour le retour du serveur doivent être:
{
Données: [], // Données tabulaires
Page_num: 5 // Nombre de pages totales
}
Code source du composant
Quant à l'implémentation de la pagination, je n'afficherai pas le code source ici. J'ai téléchargé tout le code source sur mon github, et l'adresse est: https://github.com/luozhihao/bootpage
Permettez-moi de vous rappeler à l'avance: parce que j'ai pris plusieurs heures pour chasser ce composant, je dois avoir été inadéquat dans les formats d'écriture et les spécifications des composants Vue et je n'ai pas été complètement indépendant, alors je remplit consciemment la fosse. Je ne le partagerai que ici.
Bien sûr, vous pouvez également modifier le code du composant à volonté en fonction de l'utilisation de votre projet. Après tout, il est assez compliqué de mettre en œuvre des composants de pagination importants et complets.
Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.