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人点赞

前端那点心得