iview Page 分页增加确定按钮

﹏ヽ暗。殇╰゛Y 2023-06-13 09:35 6阅读 0赞

vue:
    <Page id="pageId" show-total show-elevator show-sizer :page-size= "page.pageSize" :total = "page.total" :current = "page.pageNum" @on-change="pageChange" 
                @on-page-size-change="onPageSizeChange">
                <template>
                  当前第{
       {page.pageNum}}页，共{
       {page.pages}}页，{
       {page.total}}条记录
                </template>
                <template>
                  <button class="pageSubBtn" @click="goElevatorPage">确定</button>
                </template>
              </Page>

js:
    //点击跳转到输入的页码
      goElevatorPage(){
        let evtObj;
        let thisPage:any=document.getElementById('pageId');
        let elevatorDiv=thisPage.getElementsByClassName("ivu-page-options-elevator");
        if(elevatorDiv && elevatorDiv.length>0){
          let pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
          if ((<any>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);
        }
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 iview Page 分页增加确定按钮

vue: <Page id="pageId" show-total show-elevator show-sizer :page-size= "page.pag

﹏ヽ暗。殇╰゛Y/ 2023年06月13日 09:35/ 0 赞/ 7 阅读

相关 MyBatis-Plus分页查询——Page

写在前面 > 感觉有一段时间没有更新技术博客了，其实这段时间太丧了，心情可以说是人生低谷，不过现在基本上调节过来了。有句话怎么说来着，少壮不努力，老大徒伤悲。我很喜欢的一

左手的ㄟ右手/ 2023年01月10日 11:53/ 0 赞/ 198 阅读

相关分页使用的Page实例对象

package entity; import java.io.Serializable; import java.util.List;

系统管理员/ 2022年12月08日 14:29/ 0 赞/ 151 阅读

相关 layui table获取分页当前页页码page

先定义tablename var table_name = table.render({ }); 然后用tablename来获取 ![在这里

￡神魔★判官ぃ/ 2022年11月21日 01:04/ 0 赞/ 540 阅读

相关 Page翻页分页css代码，分页div+css代码

css分页代码集合模板如下翻页上下分页按钮效果一 ![20141222110027656][] DIV代码： <table styl

朴灿烈づ我的快乐病毒、/ 2022年08月06日 04:23/ 0 赞/ 240 阅读

相关 iview page分页组件的集成

iview page分页组件的集成今天给大家分享一下iview page分页组件与iview table表格的集成,主要是针对前端集成,整

比眉伴天荒/ 2022年06月03日 08:22/ 0 赞/ 708 阅读

相关 Vue+iview---分页功能的实现

背景订单系统前端使用vue框架，基于iview组件。当显示到表格的数据过多时，会进行分页处理。当然，分页有真分页和假分页，本次我们采用的是假分页。方法介绍

小灰灰/ 2022年03月06日 11:10/ 0 赞/ 251 阅读

相关 jQuery paging分页讲解

下面的jsonArray对象是ajax访问该方法的接收的返回值data ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

淩亂°似流年/ 2022年02月23日 04:38/ 0 赞/ 336 阅读

相关 iview 分页------记录

iview提供的分页方法 title: '', type: 'index', width: '50px', 每一页都是从1-10记录如果

港控/mmm°/ 2021年08月29日 13:34/ 0 赞/ 366 阅读

相关 element-ui 分页组件添加确定按钮，实现点击按钮后翻页功能

分页组件 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

╰+攻爆jí腚メ/ 2021年07月25日 23:35/ 1 赞/ 1338 阅读