titre du répertoire
Scénario de projet :
La pagination est également une existence très courante dans nos applications pratiques. En fait, la pagination elle-même est très bonne en élément, mais elle est beaucoup utilisée, il est donc nécessaire de l'encapsuler, principalement pour réduire la redondance du code et améliorer l'efficacité du développement. et réduire le coût de la maintenance ultérieure.
Comprendre la pagination
Voici un exemple de pagination normale
<template>
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${
val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${
val}`);
}
},
data() {
return {
currentPage: 4
};
}
}
</script>
L'effet est comme ça
Parmi eux, sept champs que nous utilisons couramment sont utilisés :
1.page-courante
:current-page="currentPage"
Il représente la page actuelle et vous pouvez entrer n'importe quel numéro de page existant pour sauter. Les principaux effets sont les suivants :
2.tailles de page
:page-sizes="[100, 200, 300, 400]"
Il est utilisé pour définir le nombre d'éléments affichés par page. Les principaux effets sont les suivants :
3.taille de la page
:page-size="100"
Définissez le nombre d'éléments affichés par défaut (ici la valeur par défaut est 100), les principaux effets sont les suivants :
4. mise en page
layout="total, sizes, prev, pager, next, jumper"
Il est utilisé pour définir la disposition des composants, et les noms des sous-composants sont séparés par des virgules, l'effet est le suivant :
Description du champ :
- total : le nombre total de pages
- tailles : combien d'éléments sont affichés sur une page
- préc : page précédente
- pager : cliquez sur le numéro de page pour sauter (permettez uniquement de sauter aux pages du haut et du bas et aux pages de début et de fin)
- suivant : page suivante
- jumper : Entrez pour accéder à n'importe quelle page existante
5. total
:total="400"
Afficher le nombre total de pages, l'effet est le suivant.
6. changement de taille
@size-change="handleSizeChange"
Déclencher un événement, qui est déclenché lorsque la taille de la page change, c'est-à-dire lorsque la page change.
7.changement actuel
@current-change="handleCurrentChange"
Evénement déclencheur, il sera déclenché lors du changement de la page en cours, c'est-à-dire qu'il sera déclenché lors de la modification du nombre d'éléments affichés sur chaque page.
Pagination du paquet :
Après avoir compris la signification de chaque champ, il peut être encapsulé.
L'idée principale est que le composant encapsulé transmet currentPage, total, sizes, pager, jumper via le composant parent, et lorsque les événements @size-change, @current-change sont déclenchés, les informations sur l'événement sont transmises au composant parent.
Créer une pagination :
Encapsuler
<!--
author:Wh1T3ZzT
component:分页
time:2023/07/25
-->
<template>
<div class="paging">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
:layout="layout"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data(){
return{
}
},
props:{
currentPage:{
default(){
return [];
}
},
pageSizes:{
default(){
return [];
}
},
pageSize:{
default(){
return [];
}
},
layout:{
default(){
return [];
}
},
total:{
default(){
return [];
}
}
},
methods:{
handleSizeChange(val) {
this.$emit('handleSizeChange',val)
console.log(`传给父组件：每页 ${
val} 条`);
},
handleCurrentChange(val) {
this.$emit('handleCurrentChange',val)
console.log(`传给父组件：当前页: ${
val}`);
},
}
}
</script>
<style>
</style>
L'emballage est complet !
Utiliser dans la page :
introduire
<template>
<div>
<Paging
:currentPage="1"
:pageSizes="[5,10,20,50,100]"
:pageSize="10"
layout="total, sizes, prev, pager, next, jumper"
:total="10"
@handleSizeChange="PagingSizeChange"
@handleCurrentChange="PagingCurrentChange"
></Paging>
</div>
</template>
<script>
import Paging from '@/components/paging/index.vue'
export default {
methods:{
PagingSizeChange(val){
console.log(`父组件接收到每页: ${
val} 条`);
},
PagingCurrentChange(val){
console.log(`父组件接收到当前页: ${
val}`);
},
}
}
</script>
Effet
succès!