Vue分页展示

最新推荐文章于 2024-05-16 10:56:48 发布

dsh153

最新推荐文章于 2024-05-16 10:56:48 发布

阅读量459

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/dsh153/article/details/105555826

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue分页展示

完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<style>
li{
    list-style: none
}
.page-bar a{
    border: 1px solid #ddd;
    position: relative;
    float: left;
    padding: 6px 12px;
    color: #337ab7;
    cursor: pointer
}
.page-bar a:hover{
    background-color: #eee;
}
.page-bar .active a{
    color: #fff;
    background-color: #337ab7;
    cursor: default;
}
.page-bar i{
    font-style:normal;
    color: #e30742;
}
.page-bar label{
	float: left;
	margin-left: 20px
}
.page-bar input{
	border: 1px solid #ddd;
    position: relative;
    float: left;
    padding: 6px 12px;
    color: #337ab7;
	width: 40px;
	margin-left: 10px;
}
</style>
</head>
<body>
 <div class="page-bar">
     <table>
         <tr v-for='list in curList'>
             <td>{{list.id}}</td>
             <td>{{list.name}}</td>
         </tr>
     </table>
    <ul>
        <!--如果目前是第一页则“上一页”不可用，反之可用-->
        <li v-if="curPage > 1"><a @click="curPage--">上一页</a></li>
        <li v-if="curPage == 1"><a style="cursor:not-allowed;">上一页</a></li>
        <!--当前页背景色为蓝色-->
        <li v-for="index in indexs"  :class="{ 'active': curPage == index}">
            <a @click="btnClick(index)">{{ index }}</a>
        </li>
        <!--如果目前是最后一页则“下一页”不可用，反之可用-->
        <li v-if="curPage < allPageNum"><a @click="curPage++">下一页</a></li>
        <li v-if="curPage == allPageNum"><a style="cursor:not-allowed;">下一页</a></li>
        <li><a>共<i>{{allPageNum}}</i>页</a></li>
    </ul>
	<label>每行显示</label><input type="text" :value="num" v-model="num"/>
</div>
<script type="text/javascript">
new Vue({
    el: '.page-bar',
    data: {
        curPage: 1,//当前页码
        num: 1,//每页展示数量
        lists:[{"id":1,"name":"a"},{"id":2,"name":"b"},{"id":3,"name":"c"},{"id":4,"name":"d"}],//即将要展示的内容
        allPageNum: 1, //总页数
        curList:[]//当前页面展示list
    },

    watch: {
        curPage: function(newValue){
            this.pageInfo(newValue,this.num);
        },
		num: function (newValue) {
            this.allPageNum = Math.ceil(this.lists.length / newValue);
            this.pageInfo(this.curPage,newValue);
        }
    },
    //初始化总页数和第一页
    created() {
      this.init();
      this.pageInfo(1,this.num);
    },
     methods: {
        init: function(){
            this.allPageNum = Math.ceil(this.lists.length / this.num);
        },
        btnClick: function(data){
            if(data != this.curPage){
                this.curPage = data;
            }
        },
		pageInfo:function (start,num) {
			var start = (start - 1) * num;
			this.curList = this.lists.slice(start,parseInt(start) + parseInt(num));
		}
    },
    computed: {
        indexs: function(){
          var left = 1;
          var right = this.allPageNum;
          var ar = [];
          if(this.allPageNum>= 5){
          	//这里最大范围从3到6，如果到达7，那么下边加2变成9，已经超过最大的范围值
            if(this.curPage > 3 && this.curPage < this.allPageNum-1){
            	//以4为参考基准，左面加2右边加2
                    left = this.curPage - 2;
                    right = this.curPage + 2;
            }else{
                if(this.curPage<=3){
                    left = 1;
                    right = 5;
                }else{
                    right = this.allPageNum;
                    left = this.allPageNum -4;
                }
            }
         }
        while (left <= right){
            ar.push(left);
            left ++;
        }
        return ar;
       }
    }
})
</script>
</body>
</html>

结果：

在这里插入图片描述

dsh153

关注

0
点赞
踩
2

收藏

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

Vue分页展示完整代码：<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script><style>li{ list-sty...
复制链接

扫一扫

专栏目录