Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to use vue to achieve a page group function". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use vue to achieve a page group function" can help you solve your doubts.

Directory of files:

We introduced the pageComponent.vue paging component into the pageComponentsTest.vue page. The whole idea is through props.

To achieve the flexible and general effect of components, the overall syntax is to use vue's VM syntax.

PageComponent.vue implementation

First of all, to implement a paging, you need to know the total number of pieces of data, the number of pieces of data displayed on a page, and which pages of data are currently displayed. Then we have props in pageComponent.vue. Look at the following code:

Props: {/ / paging configuration pageConfig: {type: Object, require: true, default () {return {pageSize: 10, / / number of entries per page pageNo: 0, / / current page index total: 0, / / total number of entries pageTotal: 0 / / total number of pages}

Based on the user input parameter, we can use the calculation property to calculate a variable for the total number of pages:

Computed: {/ / calculate the total number of pages. If pageTotal is passed, take the value of pageTotal directly. If total is passed, then calculate 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} according to pageSize.

With the total number of pages and the current page, we need all kinds of judgments to implement our html part, which is divided into four cases.

The total number of pages is less than 8, just need to traverse directly 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 at the bottom.

The total number of pages is greater than 8, and the current page is in the middle.

Let's look at the specific implementation:

Previous page {{I}} {{pageTotal}} 1 {{I + (pageTotal-6)}} 1 {{currentPage-2}} {{currentPage-1}} {{currentPage + 1}} {{currentPage + 2}} {{pageTotal}} next page

You can see that there are three methods that need to be implemented on the page, namely, the upper and lower pages, 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)}}

This is a rough implementation of pageComponent.vue. Each time a page changes, a callback of the changeCurrentPage method is triggered to notify the page currently using the component that the current page has changed.

The realization of pageComponentsTest.vue

Referencing the page is relatively simple, as long as you pass in the corresponding parameters required by the component, you can display our component. Reference section:

Cooperate with the input parameter section:

{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} This article "how to use vue to achieve a pagination group function" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.