为ivew的Page组件的跳页增加跳页确定按钮

  首次使用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上一起学习进步!

猜你喜欢

转载自www.cnblogs.com/growupup/p/9235208.html