Vue + element-ui implement paging, vueelement-ui pagination

Vue + element-ui implement paging, vueelement-ui pagination

Write paging according to his document

The most important thing is how to process the data displayed in el-table.

<El-table: data = "AllCommodityList. slice (currentPage-1) * pagesize, currentPage * pagesize)" border> AllCommodityList is the data I go to in the background,

The initial value of currentPage is set to 0.
Pagesize is the number of data entries to be displayed on the current page. The default value is 10.

)
Supplement: the slice () method returns the selected element from an existing array.

<! -- Pagination -->
<El-pagination
@ Size-change = "handleSizeChange"
@ Current-change = "handleCurrentChange"
: Current-page = "currentPage"
: Page-sizes = "[10, 20, 30, 40]"
: Page-size = "pagesize"
Layout = "total, sizes, prev, pager, next, jumper"
: Total = parseInt (total)>
</El-pagination>

 
HandleSizeChange (val ){
This. pagesize = val;
// Console. log ('$ {val} per page ');
},
HandleCurrentChange (val ){
This. currentPage = val;
},