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,配置文件也需要配置一下 ...
随机推荐
- jpype测试报错,找不到类raise _RUNTIMEEXCEPTION.PYEXC("Class %s not found" % name)
最近用jpype测试java代码 公司电脑跑着没有问题,家里电脑怎么也不行,python,jdk版本啥的都一样,但总是报找不到类名的错误 raise _RUNTIMEEXCEPTION.PYEXC(& ...
- centos7 内网可达,外网不可达
参考:https://www.cnblogs.com/operationhome/p/10207257.html 网关地址改为192.168.1.1
- [CF] E. Camels
CF 2000 的dp题目还是有点难qwq 题意: 一行有\(n\)个空位,每个空位可以填\([1,4]\)的整数,要求: 1.有\(t\)个位置满足 \(ai−1<ai>ai+1(1&l ...
- python其他篇(1)
1.跳过anaconda直接打开spyder或qtconsole: 打开终端,输入spyder或者jupyter-qtconsole 2.conda安装jpype1和pyhanlp: 参考:http: ...
- js获取(URL)地址栏参数
//获取地址栏参数 //url为空时为调用当前url地址 //调用方法为 var params = getPatams(); function getParams(url) { var theRe ...
- 迁移数据时 timestamp类型字段报错: 1067 - Invalid default value for 'login_time'
MySQL数据库升级 8.0.13,原版本5.5:执行导出来的SQL文件时报错 1067 - Invalid default value for 'login_time' 原因:MySQL 5.6以后 ...
- 模拟安装redis5.0集群并通过Java代码访问redis集群
在虚拟机上模拟redis5.0的集群,由于redis的投票机制,一个集群至少需要3个redis节点,如果每个节点设置一主一备,一共需要六台虚拟机来搭建集群,此处,在一台虚拟机上使用6个redis实例来 ...
- SSM项目web.xml等配置文件中如何查找类的全路径名?
如题, web.xml,applicationContext.xml 等配置文件中,有时不会出现自动提示类的名字,这时如何查找类的全路径名,如下图所示: 1.鼠标右键单击菜单栏Navigate选项,选 ...
- 20180708-Java变量类型
public class Test{ public void pupAge(){ int age = 0; age = age + 7; System.out.println("Puppy ...
- centos7升级kernel之后,vmware无法打开
12.57版本的vmware: https://my.vmware.com/group/vmware/details?downloadGroup=WKST-1257-LX&productId= ...