问题描述
在使用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的作用域问题
