关于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”的默认值如“图七”