为ivew的Page组件的跳页增加跳页确定按钮
首次使用vue做后台管理项目,首次使用ivew框架,好不容易所有的功能都做完了,前几天产品经理让在每个列表的跳页后面加个‘确定’按钮,说没有确定按钮有点反人类,心想那还不分分钟的事儿嘛,立马回个‘好的’。
然鹅,遍看文档好多遍都未发现Page组件有类似接口,输入页码后按下Enter键才能触发跳页,内心有一排白萝卜排排站。。。既然没有官方的,那咱就来个土方的!
话不多说,直接上干货!
众所周知,ivew的每个组件都有个ref的东西,其实它远比咱想象的要强大!通过他咱甚至可以取到组件的每个元素,对,你猜的没错,咱的确定按钮就是这么实现的!
点击确定按钮时,通过ref将跳页input框的值取到(this.$refs.page.$el.lastElementChild.lastElementChild.childNodes[1].value),拿他直接去调后台接口就行了。
完整代码
<Page v-if="current" :total="total"ref="page" :current="current" :page-size="num" @on-change="pagechange" show-elevator show-sizer @on-page-size-change="changesize"></Page>
<Button type="primary" @click="confirm">确定</Button>
confirm (){
let t_value = this.$refs.page.$el.lastElementChild.lastElementChild.childNodes[1].value;
if(t_value==""){
this.$Message.info('请填写页数');
return false;
}
if(t_value>Math.ceil(this.total/this.num)){
this.$Message.info('超过总页数,无法跳转');
this.$refs.page.$el.lastElementChild.lastElementChild.childNodes[1].value = this.current;
return false;
}
this.current = parseInt(t_value);
this.getData();//请求后台数据方法
},
技术小白,此文只为记录自己解决问题的过程,若有更好的方法欢迎po上一起学习进步!
为ivew的Page组件的跳页增加跳页确定按钮的更多相关文章
- iview中page组件的跳转功能BUG解决方案
xl_echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!! 在 ...
- iview使用之怎样给Page组件添加跳转按钮
在项目开发过程中,我们会经常遇到使用分页的表格,然而在ivieiw中,我们通常只能使用Page组件自带的功能,如下图: 切换每页条数这些基本的功能都不说了,有时候我们需要在输入框里输入想要跳转到的页数 ...
- jquery datatables 添加跳转到指定页功能
项目中使用了jquery datatables 作为我们的数据表格组件,但是分页上没有跳转到指定页,需要自己重新写.解决方法如下: 在设置dataTables的默认属性里设置它的drawCallbac ...
- 《微信小程序七日谈》- 第三天:玩转Page组件的生命周期
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 前两篇 ...
- mysql 数据库封装类:返回索引、关联、字符串数组;分页查询封装类 :$page=new Page(表的总条数,每页的条数);$sql = "".$page->limit; echo $page->fpage();
<?php class czy { public $host="localhost"; //地址 public $uid="root"; //用户名 pu ...
- JQuery Pagination 分页插件 增加了首页尾页以及跳转功能
JQuery分页插件 挺好用的 但是官方是没有提供首页尾页以及跳转功能 我觉得这个功能可以有,于是就改进了一下 一个js一个css从连接里面下 链接:http://pan.baidu.com/s/1n ...
- Django----使用模板系统渲染博客页面、实现列表和详情页的跳转、前后跳转功能
.模板写法同Flask,可以参考之前的FLask-模板 .将之前的BootStrap静态页面中的数据使用模板写 <!DOCTYPE html> <html lang="en ...
- SSM登录跳转到登录页,登录页不能加载js和样式
SSM登录跳转到登录页,登录页不能加载js和样式选用jsppage添加根路径. <% String rootPath = request.getContextPath(); %> < ...
- Datatables跳转到指定页
因为项目用到Datatables发现在分页特别多时无法跳转到指定页,自己动手增加了#Datatables 跳转到指定页#功能,实现代码如下: table = $('#user-table').data ...
随机推荐
- SSH框架之hibernate《四》
hibernate第四天 一.JPA相关概念 1.1JPA概述 全称是:Java Persistence API.是sun公司推出的一套基于ORM的规范 ...
- Flink学习(二)Flink中的时间
摘自Apache Flink官网 最早的streaming 架构是storm的lambda架构 分为三个layer batch layer serving layer speed layer 一.在s ...
- 最大熵模型和EM算法
一.极大似然已经发生的事件是独立重复事件,符合同一分布已经发生的时间是可能性(似然)的事件利用这两个假设,已经发生时间的联合密度值就最大,所以就可以求出总体分布f中参数θ 用极大似然进行机器学习有监督 ...
- Trie树的二三事QWQ
写在前面 Trie,又称字典树,是一种用于实现字符串快速检索的多叉树结构.Trie的每个结点都拥有若干字符指针,若在插入或检索字符串时扫描到一个字符c,就沿着当前节点的c这个字符指针,走向该指针指向的 ...
- 设计模式一: 单例模式(Singleton)
简介 单例模式是属于创建型模式的一种(另外两种分别是结构型模式,行为型模式).是设计模式中最为简单的一种. 英文单词Singleton的数学含义是"有且仅有一个元素的集合". 从实 ...
- 将代码上传版本库gitee
首先在电脑中安装git,配置好环境变量. 在后台输入命令上传 上传账号的用户名git config --global user.name "" 上传账号的邮箱git config ...
- eclipse快捷键 (包括查找类、方法、变量)
♦[Ct rl+T] 搜索当前接口的实现类 1. [ALT +/] 智能提示 此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时 ...
- EHCache:Eelment刷新后,timeToLiveSeconds失效了?
个人以为只要设定了timeToLiveSeconds,中间过程不管有没有访问,只要LiveSeconds时间到了,缓存就会失效.但是开发时发现并非如此,经过一番折腾,最终发现自己的理解是正确的,还是使 ...
- linux在telnet情况下root登录提示login incorrect
root登录时总是提示 login incorrect SSH可以登录 别的用户也可以通过telnet登录 唯独root不可以 解决方法: vi /etc/pam.d/login # auth r ...
- <?xml version="1.0" encoding="UTF-8"?> 的作用
version="1.0" 声明用的xml版本是1.0 encoding="UTF-8" 声明用xml传输数据的时候的字符编码,假如文档里面有中文,编码方式不是 ...