elementUI分頁元件封裝

在實際開發需求，產品需要的分頁元件比較簡單，只可以一頁頁地翻，就是為了防止用於直接翻看最後的資料（因為有一些歷史資料資料量比較大，檢視的意義不大，檢索效率比較低也比較忙，因為不希望使用者在翻頁的時候可以隨意翻看很久之前的資料）

因此需要根據實際需求進行分頁元件封裝

以下封裝的分頁元件，勉強夠用，但是還不夠完善，有需要的用於可以再次基礎上繼續完善

1

<
template
>
2<
el-pagination 
@size-change
="handlesizechange"
background @current-change
="handlecurrentchange"
:current-page
="currentpage"
:page-sizes
="pagesizes"
:page-size
="pagesize"
:total
="total"
:layout
="layout"
>
3<
slot
>
4<
ul class
="el-pager"
>
5<
li class
="number active"
>}
li>
6<
li class
="number"
@click
="handlepage(item)"
v-for
="item in pager"
>}
li>7ul
>
8slot
>
9el-pagination
>
10template
>
11<
script
>
12export 
default,18
total: ,
22pagesizes: 
27},
28pagesize: ,
32layout: 
36},
37data() 
40},
41computed:
48let flag
=this
.currentpage+4
49if
(flag
>
pager)
55return
arr56
}else
if(flag
<=
pager)59}
60},
61methods: ,
65handlesizechange(val) ,
68handlecurrentchange(val) 71}
72}7374
script
>
75<
style 
lang
="scss"
scoped
>
76.page 
8081
style
>

1、在main.js頁面全域性註冊分頁元件

//

全域性註冊分頁元件
import newpagination from '@/components/newpagination'vue.component('newpagination', newpagination)

<

new-pagination 
@current-change
="handlecurrentchangeexp"
:page-size
=listqryexp.limit 
layout
="total, prev, pager, next"
:total
=totalexp
>
new-pagination
>

ElementUI 分頁元件二次封裝

更新記錄 改善了呼叫方式，僅需傳入分頁物件與繫結查詢事件。改為通過 model 更新分頁物件。修復了ie下，輸入頁碼回車會觸發整個頁面重新整理問題 呼叫方式 pager pager query getitemlist template import pagingquery from componen...

elementUI分頁封裝 更新

elementui分頁封裝 更新 關聯到後端介面，涉及到父元件觸發子元件中的事件並處理非同步 這裡我用的是定時器解決的非同步 都說人生沒有通往成功捷徑的直梯，正因如此永遠不要對自己產生質疑 分頁元件 click.native pageclick 呼叫分頁元件 這裡用到了ref和定時器 還有傳值 呼叫...

Element UI 的分頁元件

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