iview分页增加跳转按钮

  html：

<div class="page-container">
    <Page show-elevator @on-change="pageChange" :total="total" 
        :current="page" :page-size="pageSize" show-total/>
    <Button class="goElevatorPage" @click="goElevatorPage">跳转</Button>
</div>

js方法：

/**
 * 跳转页面
 */
goElevatorPage(e) {
    let evtObj;
    let thisPage = e.srcElement.offsetParent;
    let elevatorDiv = thisPage.getElementsByClassName("ivu-page-options-elevator");
    if (elevatorDiv && elevatorDiv.length > 0) {
        let pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
        if (window.KeyEvent) {//firefox 浏览器下模拟事件
            evtObj = document.createEvent('KeyEvents');
            evtObj.initKeyEvent("keyup", true, true, window, true, false, false, false, 13, 0);
        } else {//chrome 浏览器下模拟事件
            evtObj = document.createEvent('UIEvents');
            evtObj.initUIEvent("keyup", true, true, window, 1);
            delete evtObj.keyCode;
            if (typeof evtObj.keyCode === "undefined") {//为了模拟keycode
                Object.defineProperty(evtObj, "keyCode", { value: 13 });
            } else {
                evtObj.key = String.fromCharCode(13);
            };
        };
        pageInput.dispatchEvent(evtObj);
    };
}

css:

.page-container {
    display: flex;
    align-items: center;
    margin-top: 20px;

    .goElevatorPage {
        margin-left: 10px;
    }
}

效果图：