Vue2.0, ElementUI implements table page turning

This article mainly brings you an example of Vue2.0+ElementUI realizing table page turning. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

The data type required by the ElementUI table is a dictionary array. I used python3 to write the backend, so when fetching data from the database, just add a line of cursorclass=pymysql.cursors.DictCursor. After taking it out, I stored it in the redis database for easy access later. When retrieving, just use the eval() function and then pass it to the front end.

Place the Pagination pager on the front end. I directly use the full-featured pager here.

<el-pagination
 @size-change="handleSizeChange" 
 @current-change="handleCurrentChange" 
 :current-page="currentPage" 
 :page-sizes="[10, 20, 50, 100]" 
 :page-size="pagesize" 
 layout="total, sizes, prev, pager, next, jumper" 
 :total="data.length"> 
</el-pagination>

Among them: handleSizeChange is the corresponding function when pagesize changes, and handleCurrentChange is the corresponding function when currentPage changes.

page-sizes are all selectable page-sizes. You can change the numbers yourself.

Layout is an included function, generally you don’t need to touch it.

total is the total number of data. Since it is a dictionary array, you can directly use the length method to get the total number of data.

data () { 
 return { 
 data: [], 
 currentPage:1, 
 pagesize:20, 
 
 } 
},

Initial page currentPage, initial number of data per page pagesize and data data

 methods: { 
 handleSizeChange: function (size) { 
 this.pagesize = size; 
 }, 
 handleCurrentChange: function(currentPage){ 
 this.currentPage = currentPage; 
 } 
}

The above two responses Function is easy to understand.

<el-table
 :data="data.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
 stripe 
 style="width: 100%">

el-table tag. It is easy to get through calculation. To make the page display the corresponding data after paging, the subscript should be (current page-1)*number of data per page to current page*number of data per page. Use the slice method to retrieve.

stripe is a table with zebra pattern.

<el-table-column
 prop="id" 
 label="序号" 
 align="center"> 
</el-table-column>

column tag. Multiple items can be placed to control each column. label is the name of the column, displayed in the first row. prop is the name of a key in data.

Final result.

Related recommendations:

Use VUE element-ui to write a reusable Table component

About vueElement-ui input search Let’s talk about the tree component element ui

The above is the detailed content of Vue2.0, ElementUI implements table page turning. For more information, please follow other related articles on the PHP Chinese website!