To write pagination according to his documents, the most important thing is how to deal with the data displayed in El table
<el-table :data="AllCommodityList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%">
The most important thing is to deal with the red mark above
Allcommoditylist is the background data, CurrentPage is the current page, the initial value is 0, PageSize is the current data to be displayed, the initial value is 10
The slice() method returns the selected data from an existing array
//1.Paging component
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total=parseInt(total)>
</el-pagination>
//2.control methods
handleSizeChange(val) {
this.pagesize = val;
},
handleCurrentChange(val) {
this.currentPage = val;
},
Read More:
- Research on invalid modification of elementui component style
- Python implements inserting content in the specified position of text
- Spring boot thymeleaf crud implements simple functions of adding, deleting, modifying and querying
- During a paging operation
- Error handling after mybatis custom paging plug-in
- How to use the menu of elementui unique opened sidebar
- The Vue elementui switch button uses an int type value
- Springboot: start error reporting after introducing paging plug-in PageHelper
- VMware Workstation failed to recover error: (VMX) exception 0xc0000006 (disk error while paging) has
- The SSM framework adds the mybatis paging plug-in to start the error report
- The time of the time database displayed by the front end is inconsistent
- Hide print button when printing page in front end
- Tomcat starts front-end engineering error [How to Solve]
- Record a front end error net:: err_ HTTP2_ PROTOCOL_ ERROR 200
- Decipher the evolutionary path of junior, middle and senior programmers (front end)
- Front end project construction error unexpected character ‘@’ solution
- Front end Vue project operation error module build failed
- Nginx modifies the front end request size limit (413 request entity too large)
- Jsonformat annotation solves the problem of time format in the front end of localdatetime
- The back end cannot receive the parameters passed by the front end