更新記錄：
改善了呼叫方式，僅需傳入分頁物件與繫結查詢事件。
改為通過 model 更新分頁物件。
修復了ie下，輸入頁碼回車會觸發整個頁面重新整理問題
呼叫方式：
>
:pager
="pager"
@query
="getitemlist"
/>
template
>
>
import pagingquery from
'@/components/pagingquery'
;export
default
,data()
,}, methods:},
script
>
paging-query.vue
>
class
="mod-paging fn-clear"
@submit.prevent
>
small
class
="fn-right"
layout
="total, sizes, prev, pager, next, jumper"
background
:pager-count
="7"
:total
="pager[props.total]"
:current-page.sync
="pager[props.page]"
:page-size
="pager[props.rows]"
:page-sizes
="pagesizes"
@size-change
="onchangesize"
@current-change
="onchangepage"
>
el-pagination
>
icon
="el-icon-refresh"
@click
="$emit('query')"
>
重新整理el-button
>
form
>
template
>
>
import config from
;export
default
, props:
, refresh:
, pagesizes:
, props:),
},},
computed:
,// 檢測獲取到的資料是否為空
isemptylist()
,}, watch:))
;this
.$nexttick((
)=>);
}},}
, methods:
;this
.$emit
('setpager'
, object.
assign
(this
.pager, temp));
// 觸發父元件查詢請求
this
.$nexttick((
)=>);
},// 翻頁
onchangepage
(page)))
;this
.$emit
('query');
},},
};script
>
對element ui中的分頁元件進行二次封裝
本節要掌握的幾個概念 通過 emit向父元件派發乙個事件並傳遞引數 handlesizechange val this limit 父元件中只需要接受這個事件並處理就行了 v on update pagesize event 也可以寫成這樣 handlesizechange val this lim...
對element ui的分頁進行二次封裝成元件
因為我的專案風格要統一，所以對el pagination中的樣式做修改 pagea layout prev,pager,next background total pager props.total current page.sync pager props.page page size pager...
Element UI 的分頁元件
sizechange size 當使用者單擊任意頁碼或實現頁面跳轉時會觸發current page屬性的變化。currentchange current 擷取頁數 woekeralldata.slice pagenumber currentchangeindex 1 pagenumber curre...