欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

100行代码实现一个vue分页组功能

程序员文章站 2023-11-23 19:50:40
今天用vue来实现一个分页组件,总体来说,vue实现比较简单,样式部分模仿了elementui。所有代码的源码可以再github上下载的到: 先来看一下实现效果: 点...

今天用vue来实现一个分页组件,总体来说,vue实现比较简单,样式部分模仿了elementui。所有代码的源码可以再github上下载的到: 先来看一下实现效果:

100行代码实现一个vue分页组功能

点击查看效果

整体思路

我们先看一下使用到的文件的目录:

100行代码实现一个vue分页组功能

我们在 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中情况

  1. 总页数小于8,只需要直接遍历到8就行了。
  2. 总页数大于8,但当前页小于4的。
  3. 总页数大于8,当前页靠后的。
  4. 总页数大于8,当前页在中间的。

下面看具体的实现:

<!--上一页-->
   <button @click="prepage" :disabled="currentpage === 1">上一页</button>
   <!--总页数小于8的-->
   <template v-if="pagetotal <= showpageno">
    <button v-for="i in pagetotal" @click="changecurrentpage(i)" :class="{active:i === currentpage}" :key="i">{{i}}</button>
   </template>
   <template v-else-if="currentpage < 4">
    <button v-for="i in 6" @click="changecurrentpage(i)" :class="{active:i === currentpage}" :key="i">{{i}}</button>
    <button :disabled="true">···</button>
    <button>{{pagetotal}}</button>
   </template>
   <template v-else-if="currentpage > pagetotal - 4">
    <button>1</button>
    <button :disabled="true">···</button>
    <button v-for="i in 6" @click="changecurrentpage(i + (pagetotal - 6))" :class="{active:(i + (pagetotal - 6)) === currentpage}" :key="i">{{i + (pagetotal - 6)}}</button>
   </template>
   <template v-else>
    <button>1</button>
    <button :disabled="true">···</button>
    <button @click="changecurrentpage(currentpage - 2)">{{currentpage - 2}}</button>
    <button @click="changecurrentpage(currentpage - 1)">{{currentpage - 1}}</button>
    <button class="active">{{currentpage}}</button>
    <button @click="changecurrentpage(currentpage + 1)">{{currentpage + 1}}</button>
    <button @click="changecurrentpage(currentpage + 2)">{{currentpage + 2}}</button>
    <button :disabled="true">···</button>
    <button @click="changecurrentpage(pagetotal)">{{pagetotal}}</button>
   </template>
   <!--下一页-->
   <button @click="nextpage" :disabled="currentpage === pagetotal">下一页</button>

可以看到页面上需要实现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分页组功能,希望对大家有所帮助