为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上一起学习进步！

 

转载于:https://www.cnblogs.com/growupup/p/9235208.html