Paging components are used very frequently in front-end project development, and almost all systems are involved. Encapsulating a paging component can help us save time in development and improve development efficiency.
In this example, we use ElementUI's Pagination component and bind it to some data. You can customize these data according to your needs, such as getting the total number of pages and the current page number from the API, or setting the number displayed on each page as a configurable property. In the handleCurrentChange method, you can update the data according to the new page number.
The following is the encapsulation pagination component code:
Create a new MyPagination.vue file
<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)
},
},
};Wherever you use this component, import this component and use it as a tag, for example
<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>