精品4K项目列表vue分页组件

基于vue、vue-resource和bootstrap，扩展性不强，主要是在该项目中运用。

//侧边栏列表分页
/************
 * 本组件依赖vue、vue-resource和bootstrap插件
 * athor:ywx461367
 * 时间：2017-07-04 
 * 
 */

Vue.component("my-vuepage",{
    props:{
        configs:{
            page:{
                currentPage:{type:Number,default:1},
                showItem:{type:Number,default:3},
                rows:{type:Number,default:4},
                allpage:{type:Number,default:10}
            },
            post:{
                url:{type:String},
                params:{type:Object},
                fn:{type:Function}
            }
        }
    },
    template:'<nav aria-label="Page navigation" class="vuePage text-center" v-show="!(conf.page.allpage < 2)">\
                <ul class="pagination pagination-sm">\
                    <li v-show="conf.page.currentPage != 1" @click="conf.page.currentPage-- && goToPage(conf.page.currentPage--)">\
                        <span aria-label="Previous"><span aria-hidden="true">&laquo;</span></span></li>\
                    <li v-for="item in pages" @click="goToPage(item)" :class="{\'active\':conf.page.currentPage == item}">\
                        <span style="cursor:pointer">{{item}}</span></li>\
                    <li v-show="conf.page.allpage != conf.page.currentPage && conf.page.allpage != 0 " @click="conf.page.currentPage++ && goToPage(conf.page.currentPage++)">\
                        <span aria-label="Next"><span aria-hidden="true">&raquo;</span></span></li>\
                </ul>\
            </nav>',
    computed:{
        pages:function(){	//计算页码
            if(!this.conf.page.currentPage){
                this.conf.page.currentPage =  1;
            }
            var pag = [];
            if( this.conf.page.currentPage < this.conf.page.showItem ){
                var i = Math.min(this.conf.page.showItem,this.conf.page.allpage);
                while(i){
                    pag.unshift(i--);
                }
            }else{
                var middle = this.conf.page.currentPage - Math.floor(this.conf.page.showItem / 2 ),
                    i = this.conf.page.showItem;
                if( middle >  (this.conf.page.allpage - this.conf.page.showItem)  ){
                    middle = (this.conf.page.allpage - this.conf.page.showItem) + 1
                }
                while(i--){
                    pag.push( middle++ );
                }
            }
            return pag;
        },
        conf:function(){	//更新参数值
        	return this.configs;
        }
    },
    methods:{
        goToPage:function(item){
            if(item == this.conf.page.currentPage) return;
            this.conf.page.currentPage = item;
            this.ajaxData();
        },
        ajaxData:function(){
    		var page = {
                page:this.conf.page.currentPage,
                rows:this.conf.page.rows
            };
    		if(this.conf.post.params.jqGridPageStr){
    			this.conf.post.params.jqGridPageStr = JSON.stringify(page);
    		};
    		if(this.conf.post.params.pageIndex){
    			this.conf.post.params.pageIndex = page.page;
    		};
            this.$http.post(this.conf.post.url,this.conf.post.params,{emulateJSON:true}).then(function(res){
                this.conf.post.fn(res);	//回调：在实例化vue中执行数据操作
                this.conf.page.allpage = res.body.total;
                this.conf.page.rows = res.body.rows;
                //如果用到两个url
                this.conf.post.url = this.conf.post.spareUrl || this.conf.post.url;
            },function(e){
                $4kPopTips("请求数据异常");
            });
        }
    },
    watch:{
    	"conf.post":function(val,oldVal){	//监听并初始加载一次
    		if(val.isStart){
    			this.ajaxData();
    		}
    	}
    }
});

用法：

	
    vm = new Vue({	
    	el:"#e2e_openAcocunt_content",
		data:{
			PONListPageConfig:{
				page:{currentPage:1,showItem:3,rows:4,allpage:""},
                post:{}
			},
		},
		created:function(){
			this.PONdetailsPost();
		},
		methods:{
			PONdetailsPost:function(){	//PON口详细列表请求
				this.PONListPageConfig.post = {
						isStart:true,
						url:webPath+"etwoe/searchPonInfo.action",
						params:{
							portType:this.PONSelect,
							yearName:this.initData.year,
							jqGridPageStr:true,
							searchInfo:this.PONSearch
						},
						fn:vm.PONDetailListOperation
					};
			},
			PONDetailListOperation:function(res){
                if(res.body.results.length == 0 && this.PONSearch != ""){
        			$4kPopTips("无匹配项");
        		};
				this.PONdetailsData = res.body.results;
				for(var i=0;i<this.PONdetailsData.length;i++){
					if((this.PONdetailsData[i].AVAILABLE_USER_COUNT>0 || this.PONdetailsData[i].AVAILABLE_USER_COUNT==0) && this.PONdetailsData[i].AVAILABLE_USER_COUNT<16){
						this.PONdetailsData[i].color = "#00aaff";
					}else if((this.PONdetailsData[i].AVAILABLE_USER_COUNT>16 || this.PONdetailsData[i].AVAILABLE_USER_COUNT==16) && this.PONdetailsData[i].AVAILABLE_USER_COUNT<32){
						this.PONdetailsData[i].color = "#5ecc49";
					}else if((this.PONdetailsData[i].AVAILABLE_USER_COUNT>32 || this.PONdetailsData[i].AVAILABLE_USER_COUNT==32) && this.PONdetailsData[i].AVAILABLE_USER_COUNT<64){
						this.PONdetailsData[i].color = "#ee9a00";
					}else if(this.PONdetailsData[i].AVAILABLE_USER_COUNT>64 || this.PONdetailsData[i].AVAILABLE_USER_COUNT==64){
						this.PONdetailsData[i].color = "#fb5043";
					}
				};
			}
}

<article class="content clearfix" id="e2e_openAcocunt_content">
	<my-vuepage :configs="roleListPageConfig"></my-vuepage>
</article>

 

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