使用vue.js和layui样式实现vue分页效果

引入JS

<link rel="stylesheet" type="text/css" href="/static/css/layui.css">
<script charset="utf-8" src="/static/js/jquery-3.4.1.min.js"></script>
<script charset="utf-8" src="/static/js/vue-2.6.11.min.js"></script>
<script charset="utf-8" src="/static/js/axios.min.js"></script>

使用axios 或者 jquery 看你个人熟练情况

HTML页面

<!--分页-->
<div class="page-box" id="page" v-if="totalPage>1">
    <mo-paging :page-index="pageNo" :total="totalCount" :page-size="pageSize" @change=pageChange></mo-paging>
</div>

分页模板

<template id="moPaging">
    <div class="layui-box layui-laypage layui-laypage-default">
        <span class="layui-laypage-count">共 {{size}} 条</span>
        <a href="javascript:void(0);" class="layui-laypage-prev" v-if="index>1" v-on:click="prev">上一页</a>
        <span v-if="index == 1" class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
        <a href="javascript:void(0);" class="layui-laypage-prev" v-else @click="go(1)">1</a>
        <span v-if="index > 5" class="layui-laypage-spr">…</span>
        <template v-for="pager in prePageArr">
            <span v-if="index == pager" class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>{{ pager }}</em></span>
            <a @click="go(pager)" v-else>{{pager}}</a>
        </template>
        <template v-for="pager in nextPageArr">
            <span v-if="index == pager" class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>{{ pager }}</em></span>
            <a @click="go(pager)" v-else>{{pager}}</a>
        </template>
        <span v-if="(pages-index) > 4" class="layui-laypage-spr">…</span>
        <span v-if="index == pages" class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>{{ pages }}</em></span>
        <a v-else href="javascript:void(0);" class="layui-laypage-last"  @click="go(pages)">{{pages}}</a>
        <a href="javascript:void(0);" class="layui-laypage-next" v-if="index<pages" @click="next" >下一页</a>
    </div>
</template>

分页组件

Vue.component(
	        'mo-paging',{
	        template: moPaging,
	            //通过props来接受从父组件传递过来的值
	            props : {
		            //页面中的可见页码，其他的以...替代, 必须是奇数
		            perPages : {type : Number,default : 5},
		            //当前页码
		            pageIndex : {type : Number,default : 1},
		            //每页显示条数
		            pageSize : {type : Number,default : 10},
		            //总记录数
		            total : {type : Number,default : 1}
	        	},
	        methods : {
	            prev(){
	                if (this.index > 1) {
	                    this.go(this.index - 1)
	                }
	            },
	            next(){
	                if (this.index < this.pages) {
	                    this.go(this.index + 1)
	                }
	            },
	            first(){
	                if (this.index !== 1) {
	                    this.go(1)
	                }
	            },
	            last(){
	                if (this.index != this.pages) {
	                    this.go(this.pages)
	                }
	            },
	            go (page,pageSize) {
	                if (this.index !== page || (!pageSize || this.limit !== pageSize )) {
	                    this.index = page
	                    if(pageSize){
	                        this.limit = pageSize
	                    }
	                    //父组件通过change方法来接受当前的页码
	                    this.$emit('change', this.index, this.limit)
	                }
	            },
	            limitChange(e){
	                var pageSize = e.target.value;
	                if(pageSize){
	                    this.go(1,pageSize);
	                }
	            },
	            pageChange(e){
	                var page = e.target.value;
	                if(page){
	                    this.go(page);
	                }
	            }
	        },
	        computed : {
	            //计算总页码
	            pages(){
	                return Math.ceil(this.size / this.limit)
	            },
	            prePageArr(){
	                const array = []
	                let len = this.index-1;
	                let i = this.index-1;
	                if (len >= 4) {
	                    len = 3;
	                }
	                for (let j = 1; j <= len; i--, j++) {
	                    if (i > 1) {
	                        array[array.length] = i;
	                    }
	                }
	                array.sort(function(a, b){return a - b});

	                return array;
	            },
	            nextPageArr(){
	                const array = []
	                let len = this.pages - this.index;
	                let i = this.index;
	                if (this.index == 1) {
	                    len -= 1;
	                    i = this.index + 1;
	                }
	                if (len >= 4) {
	                    len = 4;
	                }
	                for (let j = 0; j < len; i++, j++) {
	                    array[j] = i;
	                }
	                array.sort(function(a, b){return a - b});

	                return array;
	            }
	        },
	        data () {
	            return {
	                index : this.pageIndex, //当前页码
	                limit : this.pageSize, //每页显示条数
	                size : this.total || 1, //总记录数
	                showPrevMore : false,
	                showNextMore : false
	            }
	        },
	        watch : {
	            pageIndex(val) {
	                this.index = val || 1
	            },
	            pageSize(val) {
	                this.limit = val || 10
	            },
	            total(val) {
	                this.size = val || 1
	            }
	        }
	    });

vue数据加载

vm = new Vue({
			el: '#app',
			data: {
				items:[],
				totalCount:0,
				totalPage:0,
				pageNo:1,
				pageSize:20
			},
			created: function () {
				this.loadData(1,20);
			},
			methods: {
	        	loadData(index,pageSize){
	    			$.ajax({
	    				url: "/loadData",
	    				dataType:'json',
	    				data: {"pageNo":index,"pageSize":pageSize},
	    				type: "post", 
	    				success: function(req) {
	    					if(req.code==200){
	    						var data = req.data;
	    						if(data){
	    							vm.items = data.list;
	    							vm.totalCount = data.totalCount;
	    							vm.totalPage = data.totalPage;
	    							vm.pageNo = data.pageNo;
	    							vm.pageSize = data.pageSize;
	    						}
	    					}
	    				}
	    			});
	    		},
	    		//从page组件传递过来的当前page
	            pageChange (page,pageSize) {
	                this.pageNo = page
	                this.pageSize = pageSize
	                this.loadData(this.pageNo,this.pageSize)
	            }
			},
			filters: {
				  
			}
		});

分页效果