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