Vue2.0, ElementUI implémente le changement de page du tableau-js tutoriel-php.cn

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

小云云

Libérer： 2018-01-04 10:21:42

original

2110 Les gens l'ont consulté

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>

Copier après la connexion

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, 
 
 } 
},

Copier après la connexion

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; 
 } 
}

Copier après la connexion

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%">

Copier après la connexion

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>

Copier après la connexion

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.