Vue2.0, ElementUI implémente le changement de page du tableau

Cet article vous apporte principalement un exemple de Vue2.0+ElementUI réalisant le retournement de page d'un tableau. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Le type de données requis par la table ElementUI est un tableau de dictionnaire. J'ai utilisé python3 pour écrire le backend, donc lors de la récupération des données de la base de données, ajoutez simplement une ligne de curseurclass=pymysql.cursors.DictCursor. Après l'avoir retiré, je l'ai stocké dans la base de données Redis pour un accès facile plus tard. Lors de la récupération, utilisez simplement la fonction eval(), puis transmettez-la au front-end.

Placez le pager de pagination sur le front-end J'utilise directement le pager entièrement fonctionnel ici.

<el-pagination
 @size-change="handleSizeChange" 
 @current-change="handleCurrentChange" 
 :current-page="currentPage" 
 :page-sizes="[10, 20, 50, 100]" 
 :page-size="pagesize" 
 layout="total, sizes, prev, pager, next, jumper" 
 :total="data.length"> 
</el-pagination>

Parmi eux : handleSizeChange est la fonction correspondante lorsque la taille de la page change, et handleCurrentChange est la fonction correspondante lorsque la page actuelle change.

les tailles de page sont toutes des tailles de page sélectionnables. Vous pouvez modifier les numéros vous-même.

la mise en page est une fonction incluse, vous n'avez généralement pas besoin d'y toucher.

total est le nombre total de données. Puisqu'il s'agit d'un tableau de dictionnaire, vous pouvez utiliser directement la méthode length pour obtenir le nombre total de données.

data () { 
 return { 
 data: [], 
 currentPage:1, 
 pagesize:20, 
 
 } 
},

Page initiale currentPage, nombre initial de données par taille de page et données de données

 methods: { 
 handleSizeChange: function (size) { 
 this.pagesize = size; 
 }, 
 handleCurrentChange: function(currentPage){ 
 this.currentPage = currentPage; 
 } 
}

Ci-dessus Les deux fonctions de réponse sont faciles à comprendre.

<el-table
 :data="data.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
 stripe 
 style="width: 100%">

balise el-table. Il est facile de faire le calcul. Pour que la page affiche les données correspondantes après la pagination, l'indice doit être (page actuelle-1)*nombre de données par page jusqu'à la page actuelle*nombre de données par page. Utilisez la méthode slice pour récupérer.

stripe est une table à motif zébré.

<el-table-column
 prop="id" 
 label="序号" 
 align="center"> 
</el-table-column>

balise de colonne. Plusieurs éléments peuvent être placés pour contrôler chaque colonne. label est le nom de la colonne, affiché dans la première ligne. prop est le nom d'une clé dans data.

Résultat final.

Recommandations associées :

Utilisez VUE element-ui pour écrire un composant Table réutilisable

À propos de la recherche d'entrée vueElement-ui Parlons de l'élément de composant d'arborescence ui

avec la méthode de modification

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!