前言：在使用iview分页的过程中发现在输入框输入页码后只有敲击回车才会切换页码，但是人们在使用中通常不会发现这个操作，以致于使得这个组件不太好用，现在我们在插件代码上稍作改动就可以实现点击跳转页码并渲染表格的功能：

1.在page组件上绑定一个id="pageId"

<template>    
<Page :total="dataCount"
          :current="pageNum"
          :page-size="pageSize"
          size="small"
          show-total
          @on-change="changepage"
          :id="pageId"
          class="Eng-bottomPage"
          show-elevator></Page>
</template>

2.在Scirpt中声明 pageId="targetPage"

3.添加一个Button按钮，绑定点击事件"GoPage(pageId)"

<Button class="Eng-GOButton"
            @click="GoPage(pageId)"
            style="margin-top:0px;height:25px;line-height:14px;">GO</Button>

4.在methods()中写一个方法

      //Go 分页输入页码跳转方法
      GoPage (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) {
            evtObj = document.createEvent('KeyEvents');
            evtObj.initKeyEvent("keyup", true, true, window, true, false, false, false, 13, 0);
          } else {
            evtObj = document.createEvent('UIEvents');
            evtObj.initUIEvent("keyup", true, true, window, 1);
            delete evtObj.keyCode;
            if (typeof evtObj.keyCode === "undefined") {
              Object.defineProperty(evtObj, "keyCode", { value: 13 });
            } else {
              evtObj.key = String.fromCharCode(13);
            }
          }
          pageInput.dispatchEvent(evtObj);
        }

        //调用pageShow方法，重新渲染表格数据，控制每行显示多少条数据
        this.pageShow();   
        //切换分页时触发                 
        this.changepage(this.pageNum);
      }

5.效果如下图：

本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。