elementUI实现前端分页


  按照他的文档来写分页,最主要的是el-table里面展示的数据怎么处理

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

  最主要就是上面标红这一块的处理:

  AllCommodityList是后台取得数据,currentPage是当前页,初始值0,pagesize当前需要展示的数据,初始值10

  slice()方法从已有数组中返回选定的数据

//1、分页组件
<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、控制方法
 handleSizeChange(val) { this.pagesize = val; }, handleCurrentChange(val) { this.currentPage = val; },

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM