Les composants de pagination sont très fréquemment utilisés dans le développement de projets front-end, et presque tous les systèmes sont impliqués. L'encapsulation d'un composant de pagination peut nous aider à gagner du temps dans le développement et à améliorer l'efficacité du développement.
Dans cet exemple, nous utilisons le composant Pagination d'ElementUI et le lions à certaines données. Vous pouvez personnaliser ces données en fonction de vos besoins, par exemple obtenir le nombre total de pages et le numéro de page actuel à partir de l'API, ou définir le nombre affiché sur chaque page en tant que propriété configurable. Dans la méthode handleCurrentChange, vous pouvez mettre à jour les données en fonction du nouveau numéro de page.
Voici le code du composant de pagination d'encapsulation :
Créer un nouveau fichier MyPagination.vue
<template>
<!-- 分页组件封装-->
<div class="TablePage">
<el-pagination
:current-page="pageData.page"
:page-size="pageData.pageSize"
:total="pageData.total"
@prev-click="onPrevBut"
@next-click="onNextBut"
></el-pagination>
</div>
</template>
<script>
export default {
name: "TablePage",
props: {
pageData: Object,
fatherPage: {
type: Function,
default: null,
},
},
},
methods: {
// 上一页
onPrevBut (page) {
this.parent(page)
},
// 下一页
onNextBut (page) {
this.parent(page)
},
// 给父组件传值
parent (page) {
this.fatherPage(page)
},
},
};
Partout où vous utilisez ce composant, importez ce composant et utilisez-le comme balise, par exemple
<template>
<div>
其它代码。。。
<my-pagination :page-data="pageData" :father-page="fatherPage" ></my-pagination>
</div>
</template>
<script>
import my-pagination from '../components/MyPagination.vue/' //这里路径请以实际的文件的路径为准
export default{
components:{my-pagination},
data(){
return {
pageData: {
// 页码
page: 1,
// 一页的数据个数
pageSize: 10,
// 总数
total: 0
},
},
methods:{
/*
在这里还要写上API请求函数,也就是从后端返回的你需要渲染的数据
例如请求的结果为res
this.pageData.total = res.length
*/
fatherPage (e) {
this.pageData.page = e
},
}
}
</script>