對element ui的分頁進行二次封裝成元件

因為我的專案風格要統一，所以對el-pagination中的樣式做修改

="pagea"
>
layout=
"prev, pager, next"
background
:total=
"pager[props.total]"
:current-page.sync=
"pager[props.page]"
:page-size=
"pager[props.rows]"
@size-change=
"onchangesize"
@current-change=
"onchangepage"
>
<
/el-pagination>
<
/div>
<
/template>
export
default
, refresh:
, props:),
},},
computed:
,// 檢測獲取到的資料是否為空
isemptylist()
,}, watch:))
;this
.$emit
('query');
}},}
, methods:
;this
.$emit
('setpager'
, object.
assign
(this
.pager, temp));
// 觸發父元件查詢請求
this
.$emit
('query');
},// 翻頁
onchangepage
(page)))
;this
.$emit
('query');
},},
}<
/script>
.pagea
.pagea /deep/
.btn-prev,
.pagea /deep/
.btn-next
.pagea /deep/
.number
.pagea /deep/
.el-pager li 
.pagea /deep/
.number:hover
.pagea /deep/
.el-pagination.is-background .el-pager li:
not(
.disabled)
.active 
.pagea /deep/
.el-pagination button span
.pagea /deep/
.el-pagination 
<
/style>

else-if

="this.pager.count/this.pager.rows > 1"
:pager=
"pager" @setpager=
"getlist"
>
<
/pagination>

pager:

,

對element ui中的分頁元件進行二次封裝

本節要掌握的幾個概念 通過 emit向父元件派發乙個事件並傳遞引數 handlesizechange val this limit 父元件中只需要接受這個事件並處理就行了 v on update pagesize event 也可以寫成這樣 handlesizechange val this lim...

Element UI 的分頁元件

sizechange size 當使用者單擊任意頁碼或實現頁面跳轉時會觸發current page屬性的變化。currentchange current 擷取頁數 woekeralldata.slice pagenumber currentchangeindex 1 pagenumber curre...

element ui實現前端分頁

element ui裡的分頁元件 size change handlesizechange current change handlecurrentchange current page page page sizes 20,50,100 background page size limit lay...