A paging component is implemented today with VUE, which is generally a simple implementation that partially mimics elementUI. All the source code can be downloaded on Github:
Click to see the effect
The overall train of thought
Let’s first look at the directory of the files used:
pageComponentsTest.vue
pageComponent.vue
props
PageComponent. Vue
To implement a page first, you need to know the total number of data items, the number of data items displayed on a page, and the number of pages of data currently displayed. So we have props inside pageComponent. Vue. Look at the following code:
props: {
// Paging configuration
pageConfig: {
type: Object.require: true.default() {
return {
pageSize: 10.// The number of data items on a page
pageNo: 0.// Index of the current page
total: 0.// Total number of entries
pageTotal: 0 // Total pages}}}Copy the code
Depending on the user input, we can use the calculated property to calculate a variable for the total number of pages:
computed: {
PageTotal = pageTotal; pageTotal = pageTotal; pageSize = pageSize
pageTotal(){
const config = this.pageConfig
if(config.pageTotal){
return config.pageTotal
}else {
if(config.pageSize && config.total){
return Math.ceil(config.total/config.pageSize)
}else {
return 0}}}}Copy the code
With the total number of pages, and the current page, we need various judgments to implement our HTML section, which is divided into four cases
- The total number of pages is less than 8, so you just go straight through to 8.
- The total number of pages is greater than 8 but the current page is less than 4.
- The total number of pages is greater than 8 and the current page is lower.
- The total number of pages is greater than 8 and the current page is in the middle. Let’s look at the implementation:
<! -- Previous Page -->
<button @click="prePage" :disabled="currentPage === 1">The previous page</button>
<! -- Pages less than 8 -->
<template v-if="pageTotal <= showPageNo">
<button v-for="i in pageTotal" @click="changeCurrentPage(i)" :class="{active:i === currentPage}" :key="i">{{i}}</button>
</template>
<template v-else-if="currentPage < 4">
<button v-for="i in 6" @click="changeCurrentPage(i)" :class="{active:i === currentPage}" :key="i">{{i}}</button>
<button :disabled="true">...</button>
<button>{{pageTotal}}</button>
</template>
<template v-else-if="currentPage > pageTotal - 4">
<button>1</button>
<button :disabled="true">...</button>
<button v-for="i in 6" @click="changeCurrentPage(i + (pageTotal - 6))" :class="{active:(i + (pageTotal - 6)) === currentPage}" :key="i">{{i + (pageTotal - 6)}}</button>
</template>
<template v-else>
<button>1</button>
<button :disabled="true">...</button>
<button @click="changeCurrentPage(currentPage - 2)">{{currentPage - 2}}</button>
<button @click="changeCurrentPage(currentPage - 1)">{{currentPage - 1}}</button>
<button class="active">{{currentPage}}</button>
<button @click="changeCurrentPage(currentPage + 1)">{{currentPage + 1}}</button>
<button @click="changeCurrentPage(currentPage + 2)">{{currentPage + 2}}</button>
<button :disabled="true">...</button>
<button @click="changeCurrentPage(pageTotal)">{{pageTotal}}</button>
</template>
<! -- Next page -->
<button @click="nextPage" :disabled="currentPage === pageTotal">The next page</button>
Copy the code
You can see that there are three methods that need to be implemented on the page, namely, the next page, and the method of clicking on the page.
methods: {
prePage(){
this.currentPage -= 1
this.$emit('changeCurrentPage'.this.currentPage)
},
nextPage(){
this.currentPage += 1
this.$emit('changeCurrentPage'.this.currentPage)
},
changeCurrentPage(i){
this.currentPage = i
this.$emit('changeCurrentPage'.this.currentPage)
}
}
Copy the code
This is the general implementation of pageComponent. Vue. Every time a page changes, a callback to the changeCurrentPage method is triggered to inform the page currently using the component that the page has changed.
The realization of pageComponentsTest. Vue
The reference page is relatively simple, as long as the component needs to pass in the corresponding parameters, we can display our component. Quotes:
<template>
<div class="pageComponentsTest">
<page-component :page-config="pageConfigTotal" @changeCurrentPage="changePage"></page-component>
<page-component :page-config="pageConfigPageTotal"></page-component>
</div>
</template>
Copy the code
With input part:
{
name: "pageComponentsTest",
data() {
return {
pageConfigTotal: {total:21.pageSize:10.pageNo:1},
pageConfigPageTotal: {total:21.pageSize:10.pageNo:1.pageTotal:50}}},components: {'page-component':pageComponent},
methods: {
changePage(page){
this.pageConfigTotal.pageNo = page
}
}
}
Copy the code
conclusion
As you can see, the paging component is much easier to implement with VUE than it is with jQuery. One of the most obvious benefits of using THE VM mode front end is the ability to keep the mode part of the data in sync with the View part of the page. Developers don’t have to worry about this process, so it’s much easier overall. All the source code can be downloaded on Git. Finally, you can follow my personal official account to view more and better articles in real time: