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

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

趁着刚看完一篇心灵鸡汤,让打满鸡血的我总结下前段时间用到的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. thinkphp 项目不能直接域名访问 而要加index.php 才能访问

    一.apache 服务器配置问题 vim /usr/local/apache2/conf/httpd.conf 在ifModule这里加入index.php <IfModule dir_modu ...

  2. Pycharn破解补丁激活

    Pycharn破解补丁激活 到期时间: 1.  下载 https://pan.baidu.com/s/1mcQM8CLUnweY02ahKEr4PQ 并将 JetbrainsCrack-release ...

  3. C++遍历循环多维数组

    #include <iostream> using namespace std; int main() { int arr[2][2][2] = {0}; for(auto&&am ...

  4. 035:DTL常用过滤器(4)

    join过滤器: 类似与 Python 中的 join ,将列表/元组/字符串用指定的字符进行拼接.示例代码如下: {{ value|join:"/" }} 如果 value 是等 ...

  5. linux常用基本命令 grep awk 待优化

    查看centos操作系统版本:cat /etc/centos-release 切换到当前用户主目录:cd 或者cd ~ 创建文件夹/a/b/c:mkdir -pv /a/b/c.如果/a/b/c的父目 ...

  6. 回归平方和 ESS,残差平方和 RSS,总体平方和 TSS

    https://zhidao.baidu.com/question/565190261749684764.html 回归平方和 ESS,残差平方和 RSS,总体平方和 TSS   总变差       ...

  7. 51nod 1205 流水线调度

    1205 流水线调度 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 N个作业{1,2,…,n}要在由2台机器M1和M2组成的流水线上完成加工.每个 ...

  8. 心形陀螺案例css3

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8&qu ...

  9. EZOJ #362历史

    分析 就是保存前pi-1个数每个ai出现多少次 然后维护这些数当前剩余的最大值 每次和新加进来的比较即可 如果新的大直接取 否则新的最大值一定不大于原来的最大值 因此o(n) 代码 #include& ...

  10. p4111 [HEOI2015]小Z的房间[简述矩阵树定理]

    分析 [1]无向图 图G的度数矩阵为D,邻接矩阵为A 我们定义这个图的Kirchhoff矩阵为D-A 这个矩阵的任意一个n-1阶主子式的行列式的绝对值就是这个图的生成树个数 [2]有向图 如果要求内向 ...