距离上次博客更新已经快一个月了,期间也有想法在空闲的时候更新几篇博文。

燃鹅,最近懒癌作祟,丢掉的东西越来越多,再不遏止的话就真成癌了。

趁着刚看完一篇心灵鸡汤,让打满鸡血的我总结下前段时间用到的iview分页组件。

首先打开iview官网安装那一项,

不过我照这个下载了居然给我一个报错,大概是最初的版本和现在vue不兼容吧,所以可以

npm install iview (用cnpm的也是这样)

接着别忘记去main.js里面添加

往下我们找到分页那一项,

<Page :total="100" show-elevator></Page>  这是带电梯的

效果就是这样了:

当然,也有不同的API给你用,下图:

这样就完成了基础。接下来只要拿到我们需要的数据

比如像我拿到需要的

然后是组件内的代码

上面的是遍历出内容,下面的是分页组件效果。

分页上使用的API记得return!

因为分页是需要实时计算的,所以可以在computed中完成

最后还要在methods内定义

这样就完成啦

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

如有帮助,记得下面好文要顶哦~~~~~~~~~~~~~~~~~~~~

vue iview分页的更多相关文章

  1. JS(vue iview)分页解决方案

    JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...

  2. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

  3. thinkphp5+vue+iview商城 公众号+小程序更新版本

    thinkphp5+vue+iview商城加分销 源码下载地址:http://github.crmeb.net/u/crmeb 演示站后台:http://demo25.crmeb.net 账号:dem ...

  4. vue & iview

    vue & iview ui components https://codepen.io/webgeeker/pen/EJmQxQ https://www.iviewui.com/docs/g ...

  5. .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片

    .NET压缩图片保存   需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...

  6. Vue + iview框架,搭建项目遇到的相关问题记录 - 国际化router.js不能实现

    例子展示: 概述: 最近在使用vue + iview框架进行web开发,并且有一个需求,需要实现web端的国际化,在完成相关配置文件后,发现router.js 中无法配置,并且会出现异常,在经过百度找 ...

  7. 【vue iview】项目 win10 放在C盘 经常npm install不成功,就是因为 权限问题,把代码目录放到D盘就没事了。

    [vue iview]项目 win10 放在C盘 经常npm install不成功,就是因为 权限问题,把代码目录放到D盘就没事了.

  8. vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下

    vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下 renderHeader: (h, params) => { return [ h('Rad ...

  9. 基于vue的分页插件

    相信大家用过很多jquery的分页插件,那这次就用一用基于vue的分页插件. 这里的环境用的是springboot 首先要引入pagehelper的jar文件,版本是1.2.3,配置文件也需要配置一下 ...

随机推荐

  1. Java的基本数据类型,以及他们的封装类

    基本类型  大小  默认值  封装类   boolean 1 false  Boolean  byte  1 0  Byte  char  2  \u0000(null)  Character  sh ...

  2. 网络基础-IP地址

  3. php session生存周期

    今天在我的微博(Laruence)上发出一个问题: 我在面试的时候, 经常会问一个问题: “如何设置一个30分钟过期的Session?”, 大家不要觉得看似简单, 这里面包含的知识挺多, 特别适合考察 ...

  4. 学习旧岛小程序 (1) flex 布局

    css : view 相当于 div 块级元素 display 默认设置 block display:inline 设置后 设置宽度高度是无效的 要设置宽度高度 又要设置为行内元素 我们设置: (1) ...

  5. Check the port occupy on Mac OSX

    Check the port occupy on Mac OSX lsof -i :7070 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME si ...

  6. kafka消费组、消费者

    consumer group consumer instance 一个消费组可能有一个或者多个消费者.同一个消费组可以订阅一个或者多个主题.主题的某一个分区只能被消费组的某一个消费者消费.那么分区和消 ...

  7. php实现进度条原理

    PHP实现进度条的原理: 模版替换,在页面设置一个标识,轮子自己的页面,不发请求给服务器,由服务器端获得进度,然后替换该页面标识,达到进度条效果. 页面代码: 1 2 3 4 5 6 7 8 9 10 ...

  8. igserver许可证过期 & 发布服务客户端浏览出现error2032

    1.卸载igserver重装 卸载包IGServerForDotNet成功! 卸载包IGServerCore成功! 卸载包MiddleWare_ArcGIS成功! 卸载包SDE_DM成功! 卸载包SD ...

  9. web storm查看文件结构

    菜单栏Navigate -> File Structure https://www.jetbrains.com/help/webstorm/viewing-structure-of-a-sour ...

  10. EZOJ #361地理

    分析 就是分别维护l和r的个数 然后对于询问区间[L,R] 之后l树状数组中小于等于R的个数减掉r树状数组中小于L的即可 代码 #include<bits/stdc++.h> using ...