首次使用vue做后台管理项目,首次使用ivew框架,好不容易所有的功能都做完了,前几天产品经理让在每个列表的跳页后面加个‘确定’按钮,说没有确定按钮有点反人类,心想那还不分分钟的事儿嘛,立马回个‘好的’。

  然鹅,遍看文档好多遍都未发现Page组件有类似接口,输入页码后按下Enter键才能触发跳页,内心有一排白萝卜排排站。。。既然没有官方的,那咱就来个土方的!
  话不多说,直接上干货!
  众所周知,ivew的每个组件都有个ref的东西,其实它远比咱想象的要强大!通过他咱甚至可以取到组件的每个元素,对,你猜的没错,咱的确定按钮就是这么实现的!
  点击确定按钮时,通过ref将跳页input框的值取到(this.$refs.page.$el.lastElementChild.lastElementChild.childNodes[1].value),拿他直接去调后台接口就行了。
  完整代码

<Page  v-if="current" :total="total"ref="page"  :current="current" :page-size="num" @on-change="pagechange" show-elevator show-sizer @on-page-size-change="changesize"></Page>
<Button type="primary" @click="confirm">确定</Button>

  confirm (){

    let t_value = this.$refs.page.$el.lastElementChild.lastElementChild.childNodes[1].value;
    if(t_value==""){
      this.$Message.info('请填写页数');
      return false;
    }
    if(t_value>Math.ceil(this.total/this.num)){
      this.$Message.info('超过总页数,无法跳转');
      this.$refs.page.$el.lastElementChild.lastElementChild.childNodes[1].value = this.current;
      return false;
    }
    this.current = parseInt(t_value);
    this.getData();//请求后台数据方法
  },

  技术小白,此文只为记录自己解决问题的过程,若有更好的方法欢迎po上一起学习进步!

为ivew的Page组件的跳页增加跳页确定按钮的更多相关文章

  1. iview中page组件的跳转功能BUG解决方案

    xl_echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!! 在 ...

  2. iview使用之怎样给Page组件添加跳转按钮

    在项目开发过程中,我们会经常遇到使用分页的表格,然而在ivieiw中,我们通常只能使用Page组件自带的功能,如下图: 切换每页条数这些基本的功能都不说了,有时候我们需要在输入框里输入想要跳转到的页数 ...

  3. jquery datatables 添加跳转到指定页功能

    项目中使用了jquery datatables 作为我们的数据表格组件,但是分页上没有跳转到指定页,需要自己重新写.解决方法如下: 在设置dataTables的默认属性里设置它的drawCallbac ...

  4. 《微信小程序七日谈》- 第三天:玩转Page组件的生命周期

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 前两篇 ...

  5. mysql 数据库封装类:返回索引、关联、字符串数组;分页查询封装类 :$page=new Page(表的总条数,每页的条数);$sql = "".$page->limit; echo $page->fpage();

    <?php class czy { public $host="localhost"; //地址 public $uid="root"; //用户名 pu ...

  6. JQuery Pagination 分页插件 增加了首页尾页以及跳转功能

    JQuery分页插件 挺好用的 但是官方是没有提供首页尾页以及跳转功能 我觉得这个功能可以有,于是就改进了一下 一个js一个css从连接里面下 链接:http://pan.baidu.com/s/1n ...

  7. Django----使用模板系统渲染博客页面、实现列表和详情页的跳转、前后跳转功能

    .模板写法同Flask,可以参考之前的FLask-模板 .将之前的BootStrap静态页面中的数据使用模板写 <!DOCTYPE html> <html lang="en ...

  8. SSM登录跳转到登录页,登录页不能加载js和样式

    SSM登录跳转到登录页,登录页不能加载js和样式选用jsppage添加根路径. <% String rootPath = request.getContextPath(); %> < ...

  9. Datatables跳转到指定页

    因为项目用到Datatables发现在分页特别多时无法跳转到指定页,自己动手增加了#Datatables 跳转到指定页#功能,实现代码如下: table = $('#user-table').data ...

随机推荐

  1. [物理学与PDEs]第1章第2节 预备知识 2.2 Ampere-Biot-Savart 定律, 静磁场的散度与旋度

    1. 电流密度, 电荷守恒定律 (1) 电荷的定向移动形成电流. (2) 电流密度 ${\bf j}$, 是描述导体内一点在某一时刻电流流动情况的物理量, 用单位时间内通过垂直于电流方向的单位面积的电 ...

  2. Spring系列(一) Spring的核心

    Spring 简介 Spring 是一个开源轻量级企业应用架构,目的是为了简化企业级应用开发.(1)Spring 框架可以帮我们管理对象的生命周期,帮助我们管理对象间的依赖关系,相互协作:(2)Spr ...

  3. PHP 【三】

    字符串变量 $txt = "Hello world!"; 创建字符串后,就可以对它操作,可以在函数中使用,或者把它存储在变量中 并置运算符 [把两个字符串值连接起来] <?p ...

  4. 题解-Codeforces1106全套

    因为参加完wc后心情很差,而且在广州过年没Ubuntu,所以就没打这场比赛了,结果这套题全部1A了,现在看来真是错失良机 结果这场不计rating 今天是除夕,大家节日快乐 A. Lunar New ...

  5. 【medium】220. Contains Duplicate III

    因为要考虑超时问题,所以虽然简单的for循环也可以做,但是要用map等内部红黑树实现的容器. Given an array of integers, find out whether there ar ...

  6. 解决nginx和php使用ckfinder无法上传大文件的问题

    现象描述:cms内容发布系统上传不了大文件,当上传超过32M文件时就上传不了 提示:无效的文件. 文件尺寸太大. 分析文件上传过程:browser --> nginx --> php 需要 ...

  7. 【原创】大叔问题定位分享(4)Kafka集群broker节点从zookeeper上消失

    kafka_2.8.0-0.8.1 一 现象 生产环境一组kafka集群经常发生问题,现象是kafka在zookeeper上的broker节点消失,此时kafka进程和端口都在,然后每个broker都 ...

  8. iis7 设置自定义404页面无效解决方案

    想给自己做的的网站自定义一个404页面,开始 双击红框提示的错误页图标 双击上图红框提示的所示404行 修改上图红框提示的内容如下:我是直接在根目录放了一个自己做的404.html,实际情况要填写你自 ...

  9. Bootstrap-datepicker3官方文档中文翻译---概述(原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)

    bootstrap-datepicker Bootstrap-datepicker 提供了一个拥有Bootstrap样式的弹性Datepicker控件 Requirements/使用要求 Bootst ...

  10. SpringBoot系列三:SpringBoot自定义Starter

    在前面两章 SpringBoot入门 .SpringBoot自动配置原理 的学习后,我们对如何创建一个 SpringBoot 项目.SpringBoot 的运行原理以及自动配置等都有了一定的了解.如果 ...