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

问题描述

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


image.png

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

方案:

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

具体实施 如下:

引用element代码:

                
                

其中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的作用域问题

你可能感兴趣的:(IE中elementUI 分页控价-输入页码的input回车跳转的问题)