Maison > interface Web > js tutoriel > le corps du texte

Comment implémenter la pagination du contenu d'une table à l'aide de vue et element-ui

亚连
Libérer: 2018-06-02 09:36:00
original
3689 Les gens l'ont consulté

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>
Copier après la connexion

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 =&#39;http://127.0.0.1:3000/clazz/findAll&#39;;
   //向后台获取数据
   var vm = this;
   $.getJSON(url,function(data){
    vm.clazzInfo = data;
    vm.total = data.length;//设置数据总数目!!!
   }); 
  },
 current_change:function(currentPage){
    this.currentPage = currentPage;
  }
}
Copier après la connexion

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,//默认开始页面
   }
  }
Copier après la connexion

Lier les données à tbody

<el-table :data="searchInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal