vue iview分页
距离上次博客更新已经快一个月了,期间也有想法在空闲的时候更新几篇博文。
燃鹅,最近懒癌作祟,丢掉的东西越来越多,再不遏止的话就真成癌了。
趁着刚看完一篇心灵鸡汤,让打满鸡血的我总结下前段时间用到的iview分页组件。
首先打开iview官网安装那一项,

不过我照这个下载了居然给我一个报错,大概是最初的版本和现在vue不兼容吧,所以可以
npm install iview (用cnpm的也是这样)
接着别忘记去main.js里面添加


往下我们找到分页那一项,
<Page :total="100" show-elevator></Page> 这是带电梯的
效果就是这样了:

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

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

然后是组件内的代码

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

分页上使用的API记得return!
因为分页是需要实时计算的,所以可以在computed中完成

最后还要在methods内定义

这样就完成啦
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
如有帮助,记得下面好文要顶哦~~~~~~~~~~~~~~~~~~~~
vue iview分页的更多相关文章
- JS(vue iview)分页解决方案
JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...
- 基于Vue封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...
- thinkphp5+vue+iview商城 公众号+小程序更新版本
thinkphp5+vue+iview商城加分销 源码下载地址:http://github.crmeb.net/u/crmeb 演示站后台:http://demo25.crmeb.net 账号:dem ...
- vue & iview
vue & iview ui components https://codepen.io/webgeeker/pen/EJmQxQ https://www.iviewui.com/docs/g ...
- .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片
.NET压缩图片保存 需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...
- Vue + iview框架,搭建项目遇到的相关问题记录 - 国际化router.js不能实现
例子展示: 概述: 最近在使用vue + iview框架进行web开发,并且有一个需求,需要实现web端的国际化,在完成相关配置文件后,发现router.js 中无法配置,并且会出现异常,在经过百度找 ...
- 【vue iview】项目 win10 放在C盘 经常npm install不成功,就是因为 权限问题,把代码目录放到D盘就没事了。
[vue iview]项目 win10 放在C盘 经常npm install不成功,就是因为 权限问题,把代码目录放到D盘就没事了.
- vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下
vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下 renderHeader: (h, params) => { return [ h('Rad ...
- 基于vue的分页插件
相信大家用过很多jquery的分页插件,那这次就用一用基于vue的分页插件. 这里的环境用的是springboot 首先要引入pagehelper的jar文件,版本是1.2.3,配置文件也需要配置一下 ...
随机推荐
- django之子应用中开发视图函数
一:修改视图函数 报错:ImportError: No module named 'django' 原因是:pycharm中的解释器未选择虚拟环境里面的python3 from django.shor ...
- maven 配置发布仓库
·首先,在工程的pom.xml中添加仓库信息 <distributionManagement> <repository> <id>releases</id&g ...
- R语言把DataFrame的一行变成向量
在R语言里面,DataFrame的一列数据本质上可以认为是一个向量或列表,但是一行数据不是. 今天有一个31列的数据集,由于放在第一行的变量名格式不规范,读入数据的时候不能顺带读入变量名.于是跳过首行 ...
- js执行上下文与执行上下文栈
一.什么是执行上下文 简单说就是代码运行时的执行环境,必须是在函数调用的时候才会产生,如果不调用就不会产生这个执行上下文.在这个环境中,所有变量会被事先提出来(变量提升),有的直接赋值,有的为默认值 ...
- php str_word_count()函数 语法
php str_word_count()函数 语法 作用:计算字符串中的单词数.大理石平规格 语法:str_word_count(string,return,char) 参数: 参数 描述 strin ...
- 安卓环境home assistant搭建
准备搞个智能家居玩玩 先从home assistant(后面简写为HASS)开始吧 莫得树莓派,拿旧手机凑活一下 准备材料: root过的安卓机 一.安卓机Linux环境搭建 个人习惯不详细写基础环境 ...
- vue 如何通过监听路由变化给父级路由菜单添加active样式
1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...
- day10—jQuery初步实践,关于菜单
转行学开发,代码100天——2018-03-26 今天是本人写开发记录方面博客的第10天了,不知不觉已经涉及到jQuery框架的学习了. 第一次熬夜写前端代码还是两年前,不过中途放弃了,学的东西也日渐 ...
- jmeter测试https请求
测试https请求时,需要添加证书 目录 1.下载证书 2.导入 3.执行https请求 1.下载证书 在浏览器中打开要测试的https协议的网站,以谷歌为例打开,下载证书到桌面 4.一直点击下一步 ...
- delphi idhttpsever
http://blog.csdn.net/chelen_jak/article/details/50203809 delphi idhttpsever 2015-12-07 11:36 216人阅读 ...