1.首先定義乙個分頁子元件
:background=
"background"
:current-page.sync=
"currentpage"
//第幾頁
:page-size.sync=
"pagesize"
//每頁顯示幾條資料
:layout=
"layout"
:page-sizes=
"pagesizes"
//可選的每頁多少條資料
:total=
"total"
@size-change=
"handlesizechange"
//當前頁多少條資料的方法
@current-change=
"handlecurrentchange"
//顯示第幾頁
/>
2.定義props 接受父元件傳過來的值 **如下:
props:
, page:
, limit:
, pagesizes:},
layout:
, background:
, autoscroll:
, hidden:
},
3.在定義2個計算屬性 乙個為當前頁多少條資料,乙個為第幾頁,因為會改變這2個值 所以設定了set屬性
computed:
,set
(val)},
pagesize:
,set
(val)}}
,
4.在定義2個方法 乙個改變頁數,乙個當前頁多少條資料
methods:)}
,handlecurrentchange
(val))}
}
5.然後在父元件 註冊 引用
import pagination from
'@/components/pagination'
export
default
,data()
},
6.父元件 使用子元件 並接受子元件傳回的事件
"length>0"
:total=
"length"
:page.sync=
"pageindex"
:limit.sync=
"pagesize" @pagination=
"handlepagechange"
/>
handlepagechange
(data)
最後封裝的公用分頁元件就好了 就可以在任何頁面使用這個分頁元件了 vue element分頁器元件封裝
分頁元件 分頁元件的封裝 pagination size change sizechange current change currentchange page sizes 1,5,10 layout total,sizes,prev,pager,next,jumper current page.s...
vue element實現分頁加分組
for let i 1 i this total i 這個迴圈是拿到資料的總數 以此判斷取餘數 陣列的最大長度是 10 如果資料量龐大可以考慮把i換成固定的 pagedata.length 0?tabledata pagedata 利用vue的渲染方式 提供兩個資料的副本 乙個放全部資料 乙個放所進...
vue element路由跳轉保留分頁狀態問題處理
情景描述 1.點選跳轉到另乙個路由,使用路由go 1 回到上乙個路由 2.使用路由元資料meta儲存分頁資訊,在點選跳轉按鈕是儲存 3.go 1 回到上乙個路由時取出路由中的分頁資訊重新渲染頁面 問題描述 從 中強制將currentpage強制設定為保留資料,可以請求到保留頁資料,但是分頁的元件為初...