iview组件库:关于分页组件的使用与注意点

1、官方的API文档说明

      选用的分页组件是电梯快速跳转的这一种,大致效果是左边所展示的样子,那么具体如何使用呢?

API
官方的API文档


2、分页组件的使用

       第一步,在main.js文件中引入iview的组件进去

main.js

         第二步,在需要引入的vue文件中引入组件,我这边的是jdtable.vue公共文件里

jdtable.vue

1、:total是Page属性,为总条数,我这边是通过父子组件传值,传的是totla的总条数给的子组件。

2、this.pn 是Page属性,为当前页数,我在data选项中默认设置的为1,默认进入显示第一页的数据内容。

3、this.ps 是Page属性,为当前显示数据条数

4、show-elevator对应图中跳至多少页

5、show-total对用图中共多少条数

图示效果

再说说切换页码的事件的处理,官方的API文档给出的是两个事件去处理。

1.  on-change是页码改变的回调,返回改变后的页码

2.  on-page-size-change是切换每页条数时的回调,返回切换后的每页条数

子组件jdtable.vue代码

通过 @on-change="changePage" 给分页组件添加页码的回调函数,

子组件jdtable.vue代码

通过父子组件的传值,将changePage的index页码值通过事件分发出去,并在父组件添加changePage回调去接受这个index的页码值

父组件account.vue代码

在父组件中添加changePage的回调,用于去接受改变的页码值index

父组件account.vue代码

在changePage中给 this.pn 进行赋值,然后通过后台调取接口数据,将改变后的页码值传给后台,再通过response响应回来的数据去渲染到视图中去,这样响应回来的就是改变后的页码值的数据条数了。

最后,on-page-size-change回调函数同理的方法去实现即可。


3、注意点

     在使用分页组件中,可能会遇到如下的情况,我们使用修改了一条页码的条数值,但是并未给我们进行分页,比如:总共15条数据,我们处理成每页展示6条,那么按理应该是分了3页才对,2页肯定是放不下的,当我们只对 this.ps 修改为6时,展示的结果如下:

图示

怎么只显示了两页呢,通过代码我们是可以看出来 ps 的每页的条数值是已经修改了的,那么原因就出在分页组件Page中,下面是官方API中的一个属性, page-size,我们通过接口向后台告知了详细的分页数据,比如 一页多少条,多少页,数据的总条数,等等信息,但是前端的page组件是没有得知这一情况的

官方API文档

下面我们加上这属性看看:

代码

pageSize是从父组件传过来的 this.ps的值,这样再打开页面看看效果如何?

结果

因此,这一问题得到了解决,我们通过 page-size 和后台的ps直接挂钩,这样就处理了分页数不对的问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,099评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,828评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,540评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,848评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,971评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,132评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,193评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,934评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,376评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,687评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,846评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,537评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,175评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,887评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,134评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,674评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,741评论 2 351

推荐阅读更多精彩内容