directory title
Project scenario:
Paging is also a very common existence in our practical applications. In fact, paging itself is very good in element, but it is used a lot, so it is necessary to encapsulate it, mainly to reduce code redundancy, and Improve the efficiency of development and reduce the cost of subsequent maintenance.
Understanding pagination
Here is an example of a normal pagination
<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>
The effect is like this
Among them, seven fields we commonly use are used:
1.current-page
:current-page="currentPage"
It represents the current page, and you can enter any existing page number for jumping. The main effects are as follows:
2.page-sizes
:page-sizes="[100, 200, 300, 400]"
It is used to set how many items are displayed per page. The main effects are as follows:
3.page-size
:page-size="100"
Set how many items are displayed by default (here the default is 100), the main effects are as follows:
4.layout
layout="total, sizes, prev, pager, next, jumper"
It is used to set the component layout, and the names of the subcomponents are separated by commas, the effect is as follows:
Field description:
- total : the total number of pages
- sizes: how many items are displayed on a page
- prev: previous page
- pager: Click on the page number to jump (only allow jumping to the top and bottom pages and the start and end pages)
- next: next page
- jumper: Enter to jump to any existing page
5.total
:total="400"
Display the total number of pages, the effect is as follows.
6.size-change
@size-change="handleSizeChange"
Trigger an event, which is triggered when the page-size changes, that is, when the page changes.
7.current-change
@current-change="handleCurrentChange"
Trigger event, it will be triggered when the currentPage changes, that is, it will be triggered when the number of items displayed on each page is modified.
Package pagination:
After figuring out the meaning of each field, it can be encapsulated.
The main idea is that the encapsulated component passes currentPage, total, sizes, pager, and jumper through the parent component, and when @size-change, @current-change events are triggered, the event information is passed to the parent component.
Create paging:
Encapsulate
<!--
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>
Packaging is complete!
Use in the page:
introduce
<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>
Effect
success!