iView UI 使用page分页添加跳转按钮-输入页码后点击跳转

使用电梯，快速跳转到某一页

在iview里,分页组件的电梯功能输入页码后需要按回车才能跳转

这让不知道需要按回车的人摸不着头脑呀,所以呢,动动手写个跳转按钮~

<div class="overflow-h mt10"><span class="fr mt5 ml10"><Button class="btn-page mr10" type="primary" size="small" @click="goElevatorPage">跳转</Button>共<span class="blue">{{pageData.pageTotal}}</span>页,共<span class="blue">{{pageData.dataTotal}}</span>条</span><Page id="page" ref="myPage" class="fr" :total="pageData.dataTotal" @on-change="setPage" @on-page-size-change="chooseSize" show-sizer show-elevator/></div>

注意此处,需要获取到<Page>这个DOM, 所以需要手动赋予pageId,当然也可以用ref

然后是让它模拟点击

goElevatorPage(){var evtObj;var thisPage=document.getElementById('page');//var thisPage=this.$refs.myPage;//也可以用ref来获取page这个domvar elevatorDiv=thisPage.getElementsByClassName("ivu-page-options-elevator");//如果thisPage这里报错了,请核对上文的获取page的DOM的语句是否获取不到if(elevatorDiv && elevatorDiv.length>0){var pageInput = elevatorDiv[0].getElementsByTagName("input")[0];if (window.KeyEvent) {//firefox 浏览器下模拟事件evtObj = document.createEvent('KeyEvents');evtObj.initKeyEvent("keyup", true, true, window, true, false, false, false, 13, 0);} else {//chrome 浏览器下模拟事件evtObj = document.createEvent('UIEvents');evtObj.initUIEvent("keyup", true, true, window, 1);delete evtObj.keyCode;if (typeof evtObj.keyCode === "undefined") {//为了模拟keycodeObject.defineProperty(evtObj, "keyCode", { value: 13 });} else {evtObj.key = String.fromCharCode(13);}}pageInput.dispatchEvent(evtObj);}},

iView UI 使用page分页添加跳转按钮-输入页码后点击跳转相关推荐

mui点击添加类名_Mui使用jquery并且使用点击跳转新窗口的实例
网上好多朋友是这样做的: 全局插入了js代码 mui('body').on('tap', 'a', function () { document.location.href = this.href; ...
php 跳转邮箱,JS简单实现点击跳转登陆邮箱功能的方法
本文实例讲述了JS简单实现点击跳转登陆邮箱功能的方法.分享给大家供大家参考,具体如下: 前言注册的过程中往往需要填写邮箱,并登陆邮箱进行验证.利用JS可以实现针对不同的邮箱进行点击登录验证,以下为实 ...
android怎么实现点击跳转,Android开发：App点击跳转到网页的实现
在Android开发过程中,点击App里面的控件进行网页跳转是经常会遇到的需求,但是Android的网页跳转有两种方式实现App点击控件跳转到网页,第一种就是App里面的代码根据网址链接进行网页跳转, ...
iview的table+page分页
1.定义俩个数组 totalArr = []; dataArr = []; 2.获取后台接口的数据之后赋值 this.totalArr = response.data.data; var _start ...
vue 2.0 结合iview UI组件使用分页功能
python登陆成功页面跳转_模拟登陆后如何获取跳转的网页？
爬取虾米音乐时,模拟登陆网页版地址https://login.xiami.com/member/login后,返回的是一串字符(包括status.jumpurl以及账号信息等),但无法获取跳转后的网页 ...
java ajax无权限跳转_ajax请求重定向后页面不跳转问题 (使用拦截器)
一.ajax重定向的问题. 默认ajax是不支持重定向的,因为ajax本身就是局部刷新,不重新加载页面的.如果需要用到重定向可以通过以下方法: 第一步:后端代码改造. 在后端(大部分情况都是拦截器)中 ...
一个项目中既有移动端，同时也有PC端的代码，并且他们的代码分开写的，那么如何实现在手机跳转手机页面，pc点击跳转pc页面...
将以下代码放入pc首页即可 <script type="text/javascript"> function mobile_device_detect(url) { v ...
iview page分页组件的集成
iview page分页组件的集成今天给大家分享一下iview page分页组件与iview table表格的集成,主要是针对前端集成,整个前端采用vue渲染,首先我们查看一 ...

iView UI 使用page分页添加跳转按钮-输入页码后点击跳转

iView UI 使用page分页添加跳转按钮-输入页码后点击跳转相关推荐

最新文章

热门文章