vue的分页组件 - muamaker

• Z时代
• 2024-01-10
• 分类：综合

vue的分页组件

2018-03-23 17:41 

muamaker 

阅读(258) 

评论(0) 

编辑 

收藏 

举报

<template>
	<div class="page-nav">
		<div class="page-btn-wrap">
			<span class="prev" 
				v-bind:class="{ disabled: currPage==1 }"
				v-on:click="pagePrev"
				>
				上页
			</span>
			<span class="item  
				"v-bind:class="{ active: item==currPage }" 
				v-for="(item,index) in list" 
				:key="index"
				v-on:click="pageTo(item)"
				>
				{{item}}
			</span>
			<span class="next" 
				v-bind:class="{ disabled: currPage==totalPage }"
				v-on:click="pageNext"
				>
				下页
			</span>
		</div>
	</div>
</template>
<script >
	export default {
		name:"page",
		data(){
			return{
				sideNum:2,  //显示页面按钮的一半，向下取整
				currPage:1,  //当前页面
				totalPage:0, //需要分的页数, 例如有30条数据，每页为10条，则需要三页
				list:[]
			}
		},
		props:{
			"total":{
				type: Number,
				default:0
			},
			"pagesize":{
				type:Number,
				default:10,
			},
			"showPage":{
				type:Number,
				default:5
			},
			"pagenum":{
				type:Number,
				default:1
			}
		},
		methods:{
			getOffetSize:function(){
				var that = this;
				var start = 1;
			    var end = that.showPage;
			    if(that.totalPage < that.showPage) {
			        return {
			            start: 1,
			            end: this.totalPage
			        }
			    }
			    start = that.currPage - that.sideNum;
			    end = that.currPage + that.sideNum;
			    if(start <= 1) {
			        start = 1;
			        end = that.showPage;		
			    }
			    if(end >= that.totalPage) {
			        end = that.totalPage;
			        start = that.totalPage - 2 * that.sideNum; 
			    }
			    return {
			        start: start,
			        end: end
			    }
			},
			layout:function(){
				  //得到开始和结束
				var that = this;  
			    var list = [];
			    var opt = that.getOffetSize();
			    for(var i = opt.start ; i <= opt.end ; i++){
			    	list.push(i);
			    }
				that.list = list;
			},
			pageTo:function(pageNum){
				var that = this;
				that.currPage = pageNum;
				that.layoutEmit();
			},
			pagePrev:function(){
				var that = this;
				var pageNum  = that.currPage - 1;
				if(pageNum < 1){
					return;
				}
				that.currPage = pageNum;
				that.layoutEmit();
			},
			pageNext:function(){
				var that = this;
				var pageNum  = that.currPage + 1;
				if(pageNum > that.totalPage){
					return;
				}
				that.currPage = pageNum;
				that.layoutEmit();
			},
			layoutEmit(){
				var that = this;
				that.layout();
				that.$emit("pagec",that.currPage);
			}
		},
		watch:{
			"total":function(newa,oldb){
				var that = this;
				that.currPage = 1;
				console.log(newa,oldb);
				that.totalPage = Math.ceil(newa / that.pagesize);
				that.layout();	
			},
			"pagenum":function(newa,oldb){
				this.currPage = newa;
			}
		},
		mounted:function(){
			var that = this;
			that.pagesize = that.pagesize || 10;
			that.sildeNum =  Math.floor(that.showPage / 2);
			that.totalPage = Math.ceil(that.total / that.pagesize);
			that.layout();
		}
	}
</script>
<style type="text/css" lang="less">
	.page-nav{
		.page-btn-wrap{
			span{
				display: inline-block;
				width: 80px;
				height: 26px;
				line-height: 26px;
				text-align: center;
				border: 1px solid #ccc;
				cursor: pointer;
			}
			span.prev,span.next{
				width: 120px;
			}
			span.active{
				background: #0099FF;
			}
			span.disabled{
				background: #ccc;
			}
		}
	}
</style>

　　使用

		<page-btn 
			  v-on:pagec="pagec"
			  :total="total"
			  :pagesize=\'opt.pagesize\' 
			  :pagenum=\'opt.pagenum\'
			></page-btn>

• 分类 vue有关

•  

以上是 vue的分页组件 - muamaker 的全部内容， 来源链接： utcz.com/z/380969.html