时间:2021-05-28
今天用vue来实现一个分页组件,总体来说,vue实现比较简单,样式部分模仿了elementUI。所有代码的源码可以再github上下载的到:下载地址 先来看一下实现效果:
点击查看效果
整体思路
我们先看一下使用到的文件的目录:
我们在 pageComponentsTest.vue 页面引入了 pageComponent.vue 分页组件。整体思路是通过 props
来达到组件的灵活通用的效果,整体语法是使用vue的VM语法。
pageComponent.vue实现
首先实现一个分页,需要知道数据总条数,一个页面显示的数据条数和当前显示第几页的数据。那么我们在 pageComponent.vue 里面的 props 就有了。看下面的代码:
props: { // 分页配置 pageConfig: { type: Object, require: true, default() { return { pageSize: 10, //一页的数据条数 pageNo: 0, //当前页的索引 total: 0, //总的数据条数 pageTotal: 0 //总的页数 } } }根据用户入参,我们可以使用计算属性来计算一个总页数的变量:
computed: { //计算总页数,如果传了pageTotal,直接取pageTotal的值,如果传了total,那么根据pageSize去计算 pageTotal(){ const config = this.pageConfig if(config.pageTotal){ return config.pageTotal }else { if(config.pageSize && config.total){ return Math.ceil(config.total/config.pageSize) }else { return 0 } } } }有了总页数,和当前页,就需要各种判断来实现我们的html部分了,这里分4中情况
下面看具体的实现:
可以看到页面上需要实现3个方法,分别是上下页,和点击页面的方法。
methods: { prePage(){ this.currentPage -= 1 this.$emit('changeCurrentPage',this.currentPage) }, nextPage(){ this.currentPage += 1 this.$emit('changeCurrentPage',this.currentPage) }, changeCurrentPage(i){ this.currentPage = i this.$emit('changeCurrentPage',this.currentPage) } }以上就是 pageComponent.vue 的大致实现了,每次页面改变,都会触发一个 changeCurrentPage 方法的回调,用来通知当前使用组件的页面当前页已经改变。
pageComponentsTest.vue的实现
引用页面就比较简单了,只要传入组件需要的对应的参数,就能显示我们的组件了。 引用部分:
<template> <div class="pageComponentsTest"> <page-component :page-config="pageConfigTotal" @changeCurrentPage="changePage"></page-component> <page-component :page-config="pageConfigPageTotal"></page-component> </div></template>配合入参部分:
{ name: "pageComponentsTest", data() { return { pageConfigTotal:{total:21,pageSize:10,pageNo:1}, pageConfigPageTotal:{total:21,pageSize:10,pageNo:1,pageTotal:50} } }, components:{'page-component':pageComponent}, methods: { changePage(page){ this.pageConfigTotal.pageNo = page } } }总结
可以看到使用vue实现分页组件整体来说是很容易了,比使用jQuery方便很多,使用vm模式开发前端的最明显的一个好处是,能是数据mode部分与view页面部分保持同步,而开发者不用考虑这个过程,所以整体来说简单了很多。
以上所述是小编给大家介绍的100行代码实现一个vue分页组功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
今天需要实现这样一个功能,有checkbox列表可供选择,要选择不分页之间的行并保存最终实现的功能如图:(图片来自网上)具体实现首先,来看具体的代码,这里只截取
本文实例为大家分享了Vue实现web分页组件的具体代码,供大家参考,具体内容如下效果演示源代码测试分页-/vue/dist/vue.js">varapp=new
本文实例为大家分享了vue.js2.0实现分页效果的具体代码,供大家参考,具体内容如下vue.js2.0实现的简单分页*{margin:0;padding:0;
本文实例为大家分享了Vue.js实现分页查询的具体代码,供大家参考,具体内容如下vue.js的使用如下:1、引入vue.jsa、分页条b、分页条js、css2、
最近几个项目用上vue了项目又刚好需要一个分页的功能。于是百度发现几篇文章介绍的实在方式有点复杂,没耐心看自己动手写了一个。用js实现的分页结果如图所示:css