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é)

Résoudre parfaitement le problème de compatibilité d'axios sous ie, spécifique solution Les étapes sont les suivantes

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!