element中使用前端分頁

前端分頁

當后端沒有分頁的時候 用element中的組件分頁並不能對數據進行切割 需要請求回數據后自己來做切割

<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" :height="$TABLE_HEIGHT-55" style="width: 100%">

• currentPage 當前頁數
• pageSize 每頁的數據個數
• slice(n,m)查找數組中兩個索引之間的內容 返回新數組從n開始不含m

<!--分頁組件-->
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="pagesize"
  layout="total, sizes, prev, pager, next"
  :total=total>
</el-pagination>

• size-change 是pageSize 改變時會觸發的函數
• current-change 是currentPage 改變時會觸發的函數

handleSizeChange(val) {
    this.pagesize = val;
},
handleCurrentChange(val) {
    this.currentPage = val;
}