Maison > Article > interface Web > Comment implémenter la pagination du contenu d'une table à l'aide de vue et element-ui
Ci-dessous, je vais partager avec vous un exemple d'utilisation de vue et element-ui pour configurer la pagination du contenu d'un tableau. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.
Code HTML
Parce que je l'ai écrit dans le modèle, c'est-à-dire que j'ai créé une nouvelle organisation et publié le code.
<el-pagination small layout="prev, pager, next" :total="total" @current-change="current_change"> </el-pagination>
Dans le code, small indique s'il faut utiliser le petit style de pagination
layout représente la disposition des composants, et les noms des sous-composants sont séparés par des virgules
Attribut : total représente le nombre total d'entrées
Événement : le changement actuel est utilisé pour surveiller les changements de numéro de page, et le contenu change également
Pour d'autres attributs, veuillez consulter l'API officielle de l'élément
http://element.eleme.io /#/zh-CN/component/pagination
La méthode d'écoute s'écrit en méthodes
methods:{ created:function(){ //加载班级的数据 var url ='http://127.0.0.1:3000/clazz/findAll'; //向后台获取数据 var vm = this; $.getJSON(url,function(data){ vm.clazzInfo = data; vm.total = data.length;//设置数据总数目!!! }); }, current_change:function(currentPage){ this.currentPage = currentPage; } }
où l'url est expresse en arrière plan Les parcours mis en place par l'échafaudage sont mis en place.
Enregistrer les données utilisées dans data
Parce que je m'enregistre globalement, data est une fonction qui renvoie un objet
data:function(){ return { total:0,//默认数据总数 pagesize:7,//每页的数据条数 currentPage:1,//默认开始页面 } }
Lier les données à tbody
<el-table :data="searchInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
où searchInfo est le tableau à partir duquel j'ai obtenu les données d'arrière-plan.
J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.
Articles associés :
Comment gérer les paramètres d'interception axios et la gestion des erreurs ?
Utilisez axios pour implémenter la fonction de téléchargement via vue.js (tutoriel détaillé)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!