基于vue2.0的一个分页组件

最新推荐文章于 2025-12-04 17:39:28 发布

转载最新推荐文章于 2025-12-04 17:39:28 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3288561/blog/892094

文章标签：

#javascript #ui #ViewUI

本文介绍了在Vue项目中实现分页功能的两种方法，一种是使用计算属性进行逻辑处理，另一种是通过监听页面数据变化更新分页显示。文章提供了详细的代码示例和样式设置，帮助开发者快速理解和应用。

分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能。于是百度发现几篇文章介绍的实在方式有点复杂，
没耐心看自己动手造轮子写了一个，用vue的计算属性去实现真正的逻辑代码大约在20行左右相当好理解现实原理简单没什么好介绍的直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue-router</title>

  <script src="./vue.js" ></script>
  <style>
  body{
      font-family:"Segoe UI";
    }
    li{
      list-style:none;
    }
    a{
      text-decoration:none;
    }
    .pagination {
        position: relative;

      }
      .pagination li{
        display: inline-block;
        margin:0 5px;
      }
      .pagination li a{
        padding:.5rem 1rem;
        display:inline-block;
        border:1px solid #ddd;
        background:#fff;

        color:#0E90D2;
      }
      .pagination li a:hover{
        background:#eee;
      }
      .pagination li.active a{
        background:#0E90D2;
        color:#fff;
      }
  </style>
</head>
<body>
    <script type="text/x-template" id="page">
        <ul class="pagination" >
            <li v-show="current != 1" @click="current-- && goto(current)" ><a href="#">上一页</a></li>
            <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
              <a href="#" >{{index}}</a>
            </li>
            <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li>
        </ul>
    </script>
    <div id="app">
          <page></page>
    </div>





<script>

  Vue.component("page",{
      template:"#page",
        data:function(){
          return{
            current:1,
            showItem:5,
            allpage:13
          }
        },
        computed:{
          pages:function(){
                var pag = [];
                  if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
                       //总页数和要显示的条数那个大就显示多少条
                       var i = Math.min(this.showItem,this.allpage);
                       while(i){
                           pag.unshift(i--);
                       }
                   }else{ //当前页数大于显示页数了
                       var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
                           i = this.showItem;
                       if( middle >  (this.allpage - this.showItem)  ){
                           middle = (this.allpage - this.showItem) + 1
                       }
                       while(i--){
                           pag.push( middle++ );
                       }
                   }
                 return pag
               }
      },
      methods:{
        goto:function(index){
          if(index == this.current) return;
            this.current = index;
            //这里可以发送ajax请求
        }
      }
    })

var vm = new Vue({
  el:'#app',
})



</script>
</body>
</html>

在线Demo地址：https://jslife23.github.io/vue-page/index.html

Github地址：https://github.com/JSlife23/vue-page/tree/master

第二种：

<style lang="stylus">
.pagination
    margin 0
.pagination-info
    padding 6px 12px
    border 1px solid #ccc
    border-radius 4px
</style>
<template>
    <div class="row clearfix">
        <div class="col-xs-7">
            <ul class="pagination clearfix">
                <!-- 左侧切换 -->
                <li :class="{'disabled': pageData.currentPage<=1}">
                    <a href="javascript:void(0)" aria-label="Previous" @click="selectPage(pageData.currentPage-1, pageData.currentPage<=1)">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>

                <!-- 中间 -->
                <li v-for="n in pageShowArray"  :class="{'pageOne': true, 'active': n==pageData.currentPage}">
                    <a href="javascript:void(0)" @click="selectPage(n, n==pageData.currentPage)">{{n}}</a>
                </li>

                <li :class="{'disabled': pageData.currentPage>=pageData.totalPage}">
                    <a href="javascript:void(0)" aria-label="Next" @click="selectPage(pageData.currentPage+1, pageData.currentPage>=pageData.totalPage)">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-xs-2">
            <div class="input-group clearfix goto-div">
                <input type="text" class="form-control" value="{{goToNum}}" v-model="goToNum">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" @click="gotoPage()    ">跳转</button>
                </span>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="pagination-info">当前第{{pageData.currentPage}}页/总共{{pageData.totalPage}}，每页{{pageData.perPageNum}}条</div>
        </div>
    </div>
</template>

<script>

    export default {
        props: {
            pageData: {
                type: Object,
                require: true
            }
        },
        ready () {

        },

        created () {
            let self = this

            self.insertPage()

            self.$watch('pageData.currentPage', function(val) {
                self.insertPage()
            })
            self.$watch('pageData.totalPage', function(val) {
                self.insertPage()
            })
        },

        data () {
            return {
                goToNum: 1,
                pageShowArray: []
            }
        },

        methods: {
            insertPage () {
                let self = this
                self.pageShowArray = []
                if(self.pageData.totalPage<=8 || self.pageData.currentPage<=4) {
                    let nowTotalPage = self.pageData.totalPage>8?8:self.pageData.totalPage
                    for(let i=1;i<=nowTotalPage;i++) {
                        self.pageShowArray.push(i);
                    }
                } else {
                    if(self.pageData.currentPage>4&&self.pageData.currentPage<=self.pageData.totalPage-4) {
                        for(let i=self.pageData.currentPage-3;i<=self.pageData.currentPage+4;i++) {
                            self.pageShowArray.push(i);
                        }
                    } else {
                        for(let i=self.pageData.totalPage-7;i<=self.pageData.totalPage;i++) {
                            self.pageShowArray.push(i);
                        }
                    }
                }
            },

            gotoPage () {
                let thisNum = parseInt(this.goToNum)
                if(thisNum > this.pageData.totalPage) {
                    this.badPageSelect(2)
                } else {
                    if(thisNum != this.pageData.currentPage) {
                        this.selectPageByNum(thisNum)
                    }
                }
            },

            selectPage (num, type) {
                if(!type) {
                    let thisNum = parseInt(num)
                    this.selectPageByNum(thisNum)
                }
            },

            badPageSelect (status) {
                this.$dispatch('bad-page-select', status)
            },

            selectPageByNum (num) {
                this.$dispatch('page-back-num', num)
            }
        }
    }

</script>

参考网址：http://www.tuicool.com/articles/qEbeYzN

转载于:https://my.oschina.net/u/3288561/blog/892094