Vue 分页

最新推荐文章于 2024-06-19 10:54:10 发布

N_007

最新推荐文章于 2024-06-19 10:54:10 发布

阅读量620

点赞数

分类专栏： java 文章标签： vue 分页 java

本文链接：https://blog.csdn.net/N_007/article/details/78845012

版权

java 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

参考链接：基于vue2.0的一个分页组件

参考这位博主的文章，修改为自己需要的。在此记录一下

最终效果如下：

直接上代码，复制粘贴运行就可以

<!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="https://unpkg.com/vue" ></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="totalpages != current && totalpages != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li>
        </ul>
    </script>
    <div id="app">
          <page v-bind:totalpages="totalpages"></page>
    </div>





<script>

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

var vm = new Vue({
  el:'#app',
  data:{
  	totalpages:17 //假设总页数为17页
  },
  methods:{
  	//根据 pageNo 发送请求得到 list
  	getList:function(index){
  		console.log("pageNo=" + index);
  	}
  }
})



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

N_007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 分页

参考链接：基于vue2.0的一个分页组件参考这位博主的文章，修改为自己需要的。在此记录一下最终效果如下：直接上代码，复制粘贴运行就可以 vue-router body{ font-family:"Segoe UI"; } li{ list-style:none;
复制链接

扫一扫

专栏目录