J'ai déjà été en contact avec le modèle frontal d'origine, JQuery + Bootstrap, les opérations DOM complexes et la liaison de mise à jour lourde. Après m'être impliqué dans Vue, j'ai une nouvelle compréhension du cadre MVVM frontal. Cet article est construit sur WebPack + Vue. Étant donné que les travaux précédents étaient principalement basés sur le développement du serveur Java, la compréhension des cadres et des composants frontaux n'était pas suffisamment en profondeur, il est donc utilisé pour enregistrer chaque bit de l'utilisation et de la construction du cadre frontal.
Ce composant de pagination est développé en fonction de la page inférieure du bootstrap datable, et des fonctions personnalisées sont ajoutées aux paramètres pertinents.
Le rendu de l'utilisation finale est le suivant, les données proviennent de Cnodejs [https://cnodejs.org/]
Le composant de la page inférieure est principalement composé de deux parties: le numéro d'élément de données actuel s'affiche à gauche et le numéro de page de pagination à droite. Le code du composant est le suivant:
<template xmlns: v-on = "http://www.w3.org/1999/xhtml" xmlns: v-bind = "http://www.w3.org/1999/xhtml"> <div> <div> <div> <SELECT V-on: change = "menuchange ()" V-model = "limite"> <option: change = "MenuSChange ()" V-Model = "Limite" v-for = "item dans le menu" v-bider: value = "item"> {{item}} </opoption> </lect> enregistrer / page, affichant les enregistrements {{start}} à {{end}}, totalisant {{totalSize} V-Bind: class = "{'Disabled': cur == 1}"> home </a> </li> <li> <a v-on: click = "préclick ()" V-Bind: class = "{'Disabled': Cur == 1}"> Page précédente </a> 1} "> page précédente </a> </li> <li v-for =" per in in pages "v-bider: class =" {'active': cur == Per} "> <a v-on: click =" pageclick (per) "> {{per}} </a> </li> <li> <a cur = click =" NextClick () " TotalPage} "> Page suivante </a> </li> <li> <a v-on: click =" lastClick () "V-Bind: class =" {'Disabled': Cur == TotalPage} "> Dernière page </a> </li> <li> <a> Total <i> {{totalpage}} </i> </a> </div> </ template> <cript> Importer ajax à partir de '../ajax' Export Default {props: ['page-model'], data () {return {// Page initiale Cur: 1, // URL de l'adresse de la demande: this.pageModel.url? this.pagemodel.url: "", // Demande Paramètres param: this.pagemodel.param? this.pagemodel.param: {}, // La méthode de demande par défaut pour obtenir la méthode de demande: this.pagemodel.method? this.pagemodel.method: 'get', // Le nombre d'affichages par page est affiché par défaut 10 pièces par page limite: this.pagemodel.menu? this.pagemodel.menu [0]: 10, // La base de la page de base par défaut est à 5 Persiser: this.pageModel.persize? this.pagemodel.persize: 5, // Nombre d'affichage par page Menu d'options déroulants: this.pagemodel.menu? this.pagemodel.menu: [5, 10, 50], // Nom personnalisé des paramètres de pagination PageParamName: this.pageModel.pageParamName? this.pagemodel.pageParamName: ['page', 'limite'], // La liste actuelle affiche l'enregistrement Démarrer: 0, // La liste actuelle affiche l'enregistrement fin: 0, // pages totales TotalPage: 0, // }, méthodes: {// Page d'accueil FirstClick: function () {if (this.cur> 1) {this.cur = 1; this.getData (); }}, // Last Page lastClick: function () {if (this.cur <this.totalpage) {this.cur = this.totalpage; this.getData (); }}, // Page précédente préclick: function () {if (this.cur> 1) {this.cur--; this.getData (); }}, // page suivante nextClick: function () {if (this.cur <this.totalpage) {this.cur ++; this.getData (); }}, // Numéro de page PageClick: fonction (data) {if (data! = This.cur) {this.cur = data; this.getData (); }}, // actualiser le nombre d'enregistrements affichés RefreshPageCon: function () {this.start = (this.cur - 1) * this.limit + 1; if (this.totalsize> = this.limit * this.cur) {this.end = this.limit * this.cur; } else {this.end = this.totalsize; }}, // demande de pagination getData: function () {let _This = this; this.param [this.pageParamName [0]] = this.cur; this.param [this.pageParamname [1]] = this.limit; Ajax ({url: _this.url, méthode: _this.method, data: _this.param, rappel: function (res) {// renvoie le jeu de données de résultat _Teaine.limit); }, // Afficher des enregistrements par page de menu-down menuchange: function () {this.getData (); }, getPage: function (curpage, totalpage, pagenum) {var LeftPage, reightpage; curpage = curpage> 1? Curpage: 1; CurPage = Curpage> TotalPage? Total Page: Curpage; TotalPage = Curpage> TotalPage? Curpage: Total Page; // LeftPage = CurPage - Math.floor (Pagenum / 2); LeftPage = LeftPage> 1? Page gauche: 1; // droit de droite = curpage + math.floor (pagenum / 2); RightPage = RightPage> TotalPage? Total Page: Page à droite; var curpageninum = page de droite - PAGE gauche + 1; // LeftPage if (curpagenunum <pagenum && LeftPage> 1) {LeftPage = LeftPage - (Pagenum - Curpagenunum); LeftPage = LeftPage> 1? Page gauche: 1; curpagenum = page de droite - page gauche + 1; } // ajustez le côté droit if (curpagenunum <pagenum && reightpage <totalPage) {droitepage = reightpage + (pagenum - curpagenum); RightPage = RightPage> TotalPage? Total Page: Page à droite; } var arr = []; for (var i = LeftPage; i <= reightpage; i ++) {arr.push (i); } return arr; }}, calculé: {pages: function () {return this.getPage (this.cur, this.totalpage, this.persize); }}}} </ script> <style> ul, li {margin: 0px; rembourrage: 0px; } li {list-style: Aucun; Affichage: en ligne; } .page-bar li: premier-enfant> a {margin-left: 0px} .page-bar a {border: 1px solide #ddd; Décoration du texte: aucune; Position: relative; flottant: à gauche; rembourrage: 6px 12px; marge-gauche: -1px; Heure de ligne: 1.42857143; Couleur: # 337AB7; curseur: pointeur; } .page-bar A: Hover {background-Color: #eee; } .page-bar .active a {couleur: #fff; curseur: par défaut; Color en arrière-plan: # 337AB7; Color à la frontière: # 337AB7; } .page-bar I {style de police: normal; Couleur: # D44950; marge: 0px 4px; taille de police: 12px; } .page-bar .page-con, .page-size {width: 50%; Affichage: bloc; hauteur: 30px; flottant: à gauche; hauteur de ligne: 30px; } .page-bar .Page-Con ul {float: droit; Padding-Left: 15px; padding-droite: 15px; Affichage: bloc en ligne; padding-gauche: 0; } .page-bar .page-size div {padding-left: 15px; padding-droite: 15px; taille de police: 14px; } a.disabled {couleur: # 777; Color d'arrière-plan: #FFF; Border-Color: #DDD; curseur: non allongé; } a.disabled: hover {background-Color: #fff; } .clear-noTh {Clear: les deux; } select {border: solide 1px #ddd; Apparence: aucun; -Moz-apparence: aucun; -Webkit-apparence: aucun; CONTEXTE: URL ("../ Assets / Images / Arrow.png") sans répétition du centre droit du centre droit transparent; padding-droite: 15px; Padding-Left: 15px; Tableau de rembourrage: 2px; Padding-Bottom: 2px; } select :: - ms-expand {affiche: aucun; } </ style>Utilisez des modules,
<mpelate> <AVBAR> </ Navbar> <div> <Sweet> <Tread> <Tr> <th> Title </ Th> <Th> Publier Time </ Th> <th> Author </ Th> <Th> Nombre de réponses </th> <Th> Nombre de visites </th> </tr> </pody> <ttr v-show = "! <Td> {{item.title}} </td> <td> {{item.create_at}} </td> <td> {{item.author.loginname}} </td> <td> {{item.reply_count}} </td> <Td> {{item.visit_count}} </ td> </tr> <tr> v-show = "Tabelempty"> <td Colspan = "5"> Pas d'enregistrement correspondant </td> </tr> </pody> </ table> </ div> <pagebar: Page-Model = "PageModel"> </ Pagebar> '../components/navbar.vue' Importer pagebar de '../components/table-pagebar.vue' Export Default {// Ceci est la méthode d'écriture officielle, l'exportation par défaut, les composants ES6: {Navbar, PageBar}, Data () {return {allarticle: "", Doalist: [], PagEmodel: {url: ", Doalist: [], Pagemodel: {url:" 'https://cnodejs.org/api/v1/topics', menu: [5, 10, 20]},}}, calculé: {tabelempty: function () {if (this.datalist) {return false; } else {return true; }}}, événements: {refresh: function (e) {this.datalist = e; }}}} </ script> <style> Body, table {Font-Size: 12px; } TABLE {Table-Layout: Fixed; Cellules vides: show; Border-Collapse: s'effondrer; Largeur: 100%; marge: 10px 0; } td {hauteur: 30px; } div.Row {margin-left: 15px; marge-droite: 15px; } H1, H2, H3 {Font-Size: 12px; marge: 0; rembourrage: 0; } .Table {border: 1px solide #ddd; Contexte: #FFF; } .Table thead tr {background: #eee; } .Table th {background-repeat: repeat-x; hauteur: 30px; Texte-aligne: gauche; Adigne vertical: milieu; } .Table Tr.Empty {Text-Align: Centre; } .Table TD, .Table th {border: 1px solide #ddd; rembourrage: 0 1em 0; } .Table Tr: Nth-Child (Odd) TD {Background-Color: # f5f5f5; } </ style>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.
Pour les tutoriels sur les composants Vue.js, veuillez cliquer sur le tutoriel d'apprentissage de la composante Vue.js spéciale pour apprendre.
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.