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

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

趁着刚看完一篇心灵鸡汤，让打满鸡血的我总结下前段时间用到的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. Ansible笔记（1）---基本概念

    一.ansible的作用以及工作结构 1.1.ansible简介: ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func ...

  2. 将ubuntu系统迁移到ssd固态

    朋友送了一个固态硬盘给我,因此将原机械硬盘上的系统迁移到固态硬盘上. 原机械硬盘(dev/sdb)装有win10和ubuntu双系统.分区情况如下: sda1:ESP分区 sda2:资料 sda3:资 ...

  3. 学习python os commands socket模块

    import os print(os.getcwd()) #获取当前路径, 导包也是从这个路径下面才能找到 # os.chdir('./..') #返回上一级路径,再获取路径看看 # print(os ...

  4. Map和Set的联系

    Java中的集合 Java中的集合包括三大类,它们是Set.List和Map,它们都处于java.util包中,Set.List和Map都是接口,它们有各自的实现类.Set的实现类主要有HashSet ...

  5. 英语单词independent

    来源——https://www.docker.com/products/docker-hub 回到顶部 Share and Collaborate with Docker Hub Docker Hub ...

  6. MyBatis 中的#和$的区别

    #相当于对数据 加上 双引号,$相当于直接显示数据 #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的 ...

  7. 微信公众号开发（二）获取access_token

    参考:https://www.cnblogs.com/liuhongfeng/p/4848851.html 一:介绍. 接口调用请求说明 http请求方式: GET https://api.weixi ...

  8. [CF959F]Mahmoud and Ehab and yet another xor task题解

    搞n个线性基,然后每次在上一次的基础上插入读入的数,前缀和线性基,或者说珂持久化线性基. 然后一个num数组记录当时线性基里有多少数 然后每次前缀操作一下就珂以了 代码 #include <cs ...

  9. js中元素更新value页面体现不出来的原因

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. sqlserver备份和恢复-5

    视图备份和恢复 备份 1. 2. 恢复 1. 2. 3.勾选覆盖现有数据库. 4. bat备份恢复 原文: https://www.cnblogs.com/lonelyxmas/p/7958649.h ...