vue纯前端分页_基于vue的表格组件

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

之前写了一篇，是简单分页，地址如下

点击打开链接

https://blog.csdn.net/qq_33212500/article/details/80422148

vue 分页组件（比上一版本好看一些），贴代码

vue-page.js

代码如下

var vuePage = {
	template:'<div class="page-bar" id="pager">\
	    <span class="form-inline">\
	        <select class="form-control" v-model="pagesize" number>\
	            <option v-for="item in pagerData.page.arrPageSize" :value="item">{
  
  {item}}</option>\
	        </select>\
	    </span>\
	    <span class="btn btn-default" v-on:click="btnClick(1)">首页</span>\
	    <span class="btn btn-default" v-on:click="btnClick(Number(pageCurrent)-1)">上一页</span>\
		<span class="form-inline">第\
	    <input class="form-control" style="width:60px;text-align:center" v-model="pageCurrent" type="text" v-on:click="getMypageCurrent" v-on:blur="yzPage" v-on:keyup.enter="yzPage();btnClick(pageCurrent)" />\
		页</span>\
		<span>，共{
  
  {pagerData.page.pages}}页</span>\
	    <span class="btn btn-default" v-on:click="btnClick(Number(pageCurrent)+1)">下一页</span>\
	    <span class="btn btn-default" v-on:click="btnClick(pagerData.page.pages)">尾页</span>\
		<span>共{
  
  {pagerData.page.total}}条数据</span>\
	</div>',
	data:function(){
		return{
			mypagesize:10,
			mypageCurrent:1,//当前页
			sortparam:"",
			sorttype:1
		}
	},
	props: {
		pagerData:{
			default:function(){
				return{
					page:{
						//分页大小
						//pageSize:10,
						//分页数
						//arrPageSize:[10,20,30,40],
						//当前页面
						//pageNum:1,
						//总分页数
						//pages:0,
						//记录总数
						//total:0
					}
				}
			}
			
		},
		callback: {
	        default: function() {
	             return function callback() {
	                 // todo
	             }
	         }
	     }
	},
	methods:{
		 btnClick:function(page) {
			 if(page<=0){
				 page = 1;
			 }else if(page>this.pagerData.page.pages){
				 page = this.pagerData.page.pages;
			 }
			 this.pagerData.page.pageNum = page;
             if (page != this.pagenum) {
                 this.callback(page)
             }
         },
         yzPage:function(){
        	 if(/^[1-9]\d*$/.test(this.pageCurrent)==false){
        		 this.pageCurrent =this.mypageCurrent;
        		 //this.pagerData.page.pageNum = this.mypageCurrent;
        	 }else{
        		 if((Number(this.pageCurrent)<=0)||(Number(this.pageCurrent)>this.pagerData.page.pages)){
        			 this.pageCurrent =this.mypageCurrent;
        			 //this.pagerData.page.pageNum = this.mypageCurrent;
        		 }
        	 }
        	
         },
         getMypageCurrent:function(){
        	this.mypageCurrent = this.pageCurrent;
         }
	},
	computed:{
		// 分页大小 获取的时候显示父级传入的，修改的时候修改自身的。子组件不能修改父元素的值
		pagesize:{
			get:function(){
				return this.pagerData.page.pageSize;
			},
			set:function(value){
				this.pagerData.page.pageSize = value;
				this.pagerData.page.pageNum = 1;
				this.callback(1)
			}
		},
		pageCurrent:{
			get:function(){
				return this.pagerData.page.pageNum;
			},
			set:function(value){
				this.pagerData.page.pageNum = value;
			}
		}
	}
}

table表单下的代码如下，该代码复制到table标签下即可

<vue-page  v-bind:pager-data="pagerData" :callback="callback"></vue-page>

js代码如下

var vue = new Vue({
        el:"#app",
        data:{
            rsList:[],
            pagerData:{
                page:{
                    //分页大小
                    pageSize:10,
                    //分页数
                    arrPageSize:[10,20,30,40,50],
                    //当前页面
                    pageNum:1,
                    //总分页数
                    pages:0,
                    //记录总数
                    total:0
                }
            }
        },
        created: function () {
            this.callback(1);
        },
        components:{
            'vue-page': vuePage
        },
        methods:{

            callback: function(page){
                this.pagerData.page.pageNum = page;
                this.globalCurPage = page;
                var params = {};
                params.pageNum = page;
                params.pageSize = this.pagerData.page.pageSize;;
                params.receiveStatus = this.receiveStatus;
                sysUserController.getMessageList(params,function (data) {
                    if(data.status==200){
                        var resultObject = data.resultObject;
                        vue.rsList = resultObject.list;
                        vue.pagerData.page.pages = resultObject.pages;
                        vue.pagerData.page.total = resultObject.total;
                    }
                });
            }
        }
    });

需引入

bootstrap.min.css

样式完成！

页面效果如下

======================================

源码地址：https://download.csdn.net/download/qq_33212500/10433011