Vue+iview分页组件中添加Go按钮点击变换分页，并跳转到对应的表格页的数据显示

前言：在使用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.效果如下图：