vue+element-ui table 实现表格分页

分页html代码:

 

element-ui官网上有写有关分页的两个事件size-change和current-change

vue+element-ui table 实现表格分页_第1张图片

想要表格和分页结合,动态展现分页效果,可通过以下代码实现

 // 每页显示数据变更
 handleSizeChange(val) {
    // console.log("每页" + val + "条");
    //this.pageSize 是请求表格数据接口中的参数 设置表格每页显示多少条数据
    this.pageSize = val; 
    this.loadTableData(); //调表格数据的接口
 },
 // 页码变更
 handleCurrentChange(val) {
   // console.log("当前页" + val);
   //this.currentPage 是请求表格数据接口中的参数 设置表格当前处于多少页
   this.currentPage = val;
   this.loadTableData();
 },

 

你可能感兴趣的:(前端)