關於iview ui的"Page分頁"組件的使用

iView是一個很好的vue框架，可是因框架比較新，使用的案例比價少，官網上雖有api，可是api應用案例也比較少，下面來講下「Page分頁」組件的使用，但咱們屬性了這個組件，會感受到其實框架的套路也就這樣，用法差很少的。
這裏給出Page分頁網址：https://www.iviewui.com/components/page

Page組件給出的api有不少，可是api的使用案例去只有幾個，以下圖

 

image.png

只有這些信息確定是不夠的，在實際的項目開發上，使用一個分頁時，咱們是否是該去綁定
1.關於"當前頁":

• 如何動態的綁定當前頁
• 怎麼監聽當前頁的變化

2.關於"當前條數"

• 如何動態的綁定當前頁
• 怎麼監聽當前條數的變化

下面來看看例子：

 

圖二.png

對於屬性current、total、page-size的使用：

從api可知current、total、page-size的類型都是Number,因此咱們在data中定義時應該定義爲number類型，以下：

 

1.如何作到「當咱們修改本身定義的page對象裏的數據，組件上的數據跟着改變」
這就得動態的去綁定上面的設置的3個值，api給出是這樣的：

咱們的實際應用：
:total="page.total" :current="page.index" :page-size="page.size"
其中page.total，page.index，page.size是咱們在data裏定義的變量，如圖二
固然咱們也能夠不動態直接去設置如:total="1" :current="10" :page-size="50"可是這樣在實際的開發上是不合用的。

對於屬性on-change、on-page-size-change的使用：

2.如何作到「當咱們修改組件上的條數或當前頁時，咱們本身定義的page對象裏的數據也會實時的跟着跟着改變」
這就得在組件上定義函數去監聽，而組件是經封裝過的，它已經暴露給咱們監聽的接口了，api上是這樣寫的

 

咱們的實際應用：
@on-change="pIndexChange" @on-page-size-change="pSizeChange"
其中pIndexChange和pSizeChange是咱們在methods中定義的方法，如圖二
每當切換前前頁碼時，pIndexChange函數都會監聽新的頁碼，而後咱們把它賦值給this.page.index ，這樣就作到了同步啦。

對於屬性page-size-opts、placement的使用

 

圖三.png

 

image.png

固然這裏的"'top'"和"[10,20,50,100,200,500]"也能夠方法data裏面。
注意placement值的寫法，該屬性接收的值是字符串，因此咱們須要在裝屬性值的字符串裏再加多一對引號。

對於屬性show-total、show-elevator、show-size、show-size的使用：

simple、show-total、show-elevator、show-size、show-size的類型是Boolean，屬性值爲布爾值的用法有3種：
1.當屬性爲布爾值時，只要寫出該屬性，該屬性值就爲true，因此當咱們要用法這個屬性時，直接寫在組件上即可以，如圖二和下圖的「1」用法；
2.若是咱們想把屬性寫在組件上，在來設置它的值呢？以下圖的「2」用法；
3.若是咱們想動態的去設置該值呢？固然也是能夠把屬性值寫到data裏面，以下圖的「3」用法

 

圖四.png

到這裏咱們能夠注意到，無論屬性的是什麼相似的值，在綁定到組件時，咱們都要把它放到字符串裏的。

關於Page組件的使用大概就這些：
關於屬性的使用：
:屬性名 = 「直接設置/在data裏設置」
props屬性都是能夠動態綁定的，動態綁定的方法就是在該屬性前加：號，而後等於一個data裏面定義的變量，變量的值是什麼呢？字符串？對象？布爾值？這就要看api裏的的「類型」這一欄的規定啦。
關於方法的使用：
@事件名=「函數」
函數在定義時注意查看api的參數和返回值

關於默認值的使用

 

圖五.png

 

圖六.png

 

圖七.png

當咱們寫上組件時，什麼屬性都不寫時，如「圖五」
當咱們寫上組件時，寫上"show-total, show-size, show-elevator"屬性(即設置這些屬性值爲true)，
由於
show-total屬性與total屬性相關聯，
show-size屬性與page-size, page-size-opts, placement屬性相關聯；
show-elevator屬性與curren屬性相關聯 因此 當咱們寫上"show-total, show-size, show-elevator"屬性時會自動綁定上 「curren, total, page-size, page-size-opts, placement」的默認值如「圖七」