IE中elementUI 分页控价-输入页码的input回车跳转的问题

本文主要是介绍IE中elementUI 分页控价-输入页码的input回车跳转的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题描述

在使用Element-UI的过程中发现其分页组件存在一个BUG，其‘前往【】页'中的input的回车时间存在失效不响应事件的问题
第一次事可以的，第二次之后的操作，没有任何的反应；

image.png

针对在这个问题研究了下，element本身的组件在IE中的标线是正常的，在我们使用的时候却发现了问题，定位发现没有走到对应的事件中

方案：

结合jquery使用原生的键盘监听事件来控制，只是针对页面的跳转加一层判断；

具体实施 如下：

引用element代码：

                <el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[30, 50, 100]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="totalRecords"class="pagination"></el-pagination>

其中handleCurrentChange为页码变化监听事件

//切换页码handleCurrentChange(currentPage) {//当前页码let oldCurrentPage = this.currentPage;if (currentPage) {//判空//新旧页码对比没有变化或者超过总页数不做处理if (oldCurrentPage != currentPage && currentPage <= this.totalPages) {this.currentPage = currentPage;this.getAppData();} } },

监听 inpout的键盘事件：

mounted() {const that = this;
//输入框键盘事件监听$('.is-in-pagination .el-input__inner').bind('keydown',function(event){if(event.keyCode == "13") {let value = parseInt(this.value);that.handleCurrentChange(value);}}); 
}

注意事项
1.避免重复调用接口
2.this的作用域问题

0人点赞

前端那点心得

这篇关于IE中elementUI 分页控价-输入页码的input回车跳转的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---