xl_echo编辑整理,欢迎转载,转载请声明文章来源。欢迎添加echo微信(微信号:t2421499075)交流学习。 百战不败,依不自称常胜,百败不颓,依能奋力前行。——这才是真正的堪称强大!!


在使用iview的时候,对于界面效果确实是比较满意,提供的组件也很多的很全,和element相比,iview更注重视觉和渲染。但是也有一些缺点,比如组件的bug,生态圈的收费问题。这里只讲解page的跳转bug

iview中page最初的跳转功能样子如下

可以看到并没有跳转的按钮,如果要跳转的话,必须输入页数之后按'enter'键,如果不按没法跳转。对于用户来说,电脑的操作水平不一,很多人可能没有enter的意识,这样就造成了这个功能的鸡肋,所以需要修复

修复最终的界面跳过如下

跳转按钮是我们手动加上去的一个按钮

<Page
:id="pageId"
:total="total"
:current="page"
@on-change="changePage"
@on-page-size-change="changesPages"
show-sizer
show-elevator
>
</Page>
<div style="float: left;margin-right: 10px;margin-top: 12px">
<Button type="primary" size="small" @click="goElevatorPage(pageId)">跳转</Button>
</div>

加上按钮之后我们并没有实现功能,只是看起来比较像而已。

模拟点击跳转

编写点击跳转方法之前要现在page组件中添加:id="pageId",并在return当中定义对应pageId的值。我这里定义如下:

return {
pageId: "targetpage",
}

完成之后,编写跳转方法,如下:

goElevatorPage:function(pageId){
var evtObj;
var thisPage=document.getElementById(pageId);
var elevatorDiv=thisPage.getElementsByClassName("ivu-page-options-elevator");
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") {//为了模拟keycode
Object.defineProperty(evtObj, "keyCode", { value: 13 });
} else {
evtObj.key = String.fromCharCode(13);
}
}
pageInput.dispatchEvent(evtObj);
}
}

多page组件同一页面

如果在这个页面中间有很多个page组件,那么这里只能实现一个page组件的跳转,如果需要多个page组件都有这个功能,模拟跳转方法,只需要一个即可,关键是要在page组件中添加:id="pageId" 一个page对应一个不同的id值,在对应调用方法的地方传入对应id值接口。

目前没有解决的疑问

比如我点击跳转按钮之后,跳转到了响应页面。到了相应页面之后,不改变当前需要跳转的页面值的时候,再次点击跳转按钮,是没有反应的。

iview中page组件的跳转功能BUG解决方案的更多相关文章

  1. iview使用之怎样给Page组件添加跳转按钮

    在项目开发过程中,我们会经常遇到使用分页的表格,然而在ivieiw中,我们通常只能使用Page组件自带的功能,如下图: 切换每页条数这些基本的功能都不说了,有时候我们需要在输入框里输入想要跳转到的页数 ...

  2. 为ivew的Page组件的跳页增加跳页确定按钮

    首次使用vue做后台管理项目,首次使用ivew框架,好不容易所有的功能都做完了,前几天产品经理让在每个列表的跳页后面加个‘确定’按钮,说没有确定按钮有点反人类,心想那还不分分钟的事儿嘛,立马回个‘好的 ...

  3. iview中upload组件上传图片,跨域

    前提:先前开发了一个A项目,A项目中有一套上传图片的接口,现在开发B项目. B项目开发中用iview中的upload组件上传图片,用到了A项目中上传接口,爬坑经历 1.涉及到了跨域解决:后台配置一下文 ...

  4. iView的page 组件

    //html <div class="pageNation"> <Page :total= totalPages :page-size= pageSize siz ...

  5. Easyui中tree组件实现搜索定位功能及展开节点定位

    这几天遇到个input + tree  实现搜索功能的需求,在这里贴出来供大家参考下,如果你有更好的实现效果希望不腻赐教! 首先给大家看看效果     小二 上图  : 需要的部件知识: easyui ...

  6. iView中Tree组件children中动态checked选中后取消勾选再选中无效问题

    如题,我有一个Tree组件,动态更新check选中子级列表的时候,取消勾选了再点击选中时复选框样式不是勾选状态,但是数据已经有了. 对此解决方案是:将初始化时Tree组件data数据深拷贝一遍再去判断 ...

  7. iView的tree组件实现单选功能

    iView中的树组件有复选框可以多选,但是目前还没有提供单选框的模式,不显示复选框可以提供高亮单选的模式,但是再次点击就被取消了,没有实现真正的单选: tree 的属性配置中 multiple 是否支 ...

  8. vue.js 1中父组件跳到子组件中并传参让子组件显示不同的内容

    父组件中的点击跳转: <ul class="insurance-entry clearfloat"> <li v-link="{name:'produc ...

  9. Android 短信模块分析(二) MMS中四大组件核心功能详解

    接下来的分析先从MMS中四大组件(Activity ,BroadCastReceiver,Service,ContentProvider),也是MMS中最核心的部分入手: 一. Activity  1 ...

随机推荐

  1. leetcode的Hot100系列--136. 只出现一次的数字

    因为之前刚写了461号题目,这个题目与那个很相似, 461号题目用异或来算两个不一样的部分, 那这个题目需要排除一样的部分,并找到不一样的部分. 那么可以再利用一下异或的特性: 1.相同为0,所以,a ...

  2. POI 设置Excel单元格背景色(setFillForegroundColor)

    背景介绍:使用Java开发信息系统项目,项目中往往会涉及到报表管理部分,而Excel表格首当其冲称为最合适的选择,但是对单元格操作时对于设置单元格的背景颜色却很少提及,本文旨在方便单元格背景颜色设计. ...

  3. C++智能指针的几种用法

    auto在c++11中已经弃用. 一.auto_ptr模板 auto_ptr与shared_ptr.unique_ptr都定义了类似指针的对象,可以将new到的地址赋给这一对象,当智能指针过期时,析构 ...

  4. ecshop面包屑修改

    找到includes 找到lib_main.php 大约163样左右 /* 处理有分类的 */这段代码下面的一行修改成的对应的自己网站的分类,类似这样: 注释掉180行到194行左右,然后添加自己的分 ...

  5. MyBatis:choose标签的用法

    <!-- 4.2 choose用法 需求: 在已有的sys_user表中,除了主键id外,我们认为user_name也是唯一的, 所有的用户名都不可以重复.现在进行如下查询:当参数id有值的时候 ...

  6. Maven(三)使用 IDEA 创建一个 Maven 项目

    利用 IDEA 创建一个 Maven 项目 创建 Maven 项目 选择 File --> New --> Project 选中 Maven 填写项目信息 选择工作空间 目录结构 ├─sr ...

  7. SSM 框架集成

    1.SSM是什么? SSM是指目前最主流的项目架构的三大框架: SpringMVC : spring的 Web层框架,是spring的一个模块 Spring :容器框架 MyBatis :持久层框架 ...

  8. RecycleView文字吸顶,点击吸顶布局刷新数据

    实现效果 需求 Recycle有一个头布局,可以跟随列表进行滑动 点击头布局之后可以重新加载列表数据 随着头布局的消失,留下一个可点击的布局(该布局在头布局中) 效果类似下图: 淘宝的商品列表,随着我 ...

  9. Flutter初体验--环境搭建

    Fluter最近火了起来,它的有点很多,今天我做一篇在Windows下安装Flutter的教程. 一.下载    无论你要安装什么软件,都要先下载下来.我用的是SourceTree,地址: https ...

  10. EF Core懒人小技巧之拒绝DbSet

    前言 最近在项目中使用EF Core的频率越来越高,当项目比较大的时候,疯狂往DbContext中加各种DbSet,你会不会特难受?如果你是一键生成的大佬,那么请忽略本文.本文旨在不写 DbSet,那 ...