vue 分页组件（比上一版本好看一些）

亦凉 2022-05-24 08:05 46阅读 0赞

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

[点击打开链接  
][Link 1]

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

样式完成！

页面效果如下

![20180523170619998][]

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

源码地址：[https://download.csdn.net/download/qq\_33212500/10433011][https_download.csdn.net_download_qq_33212500_10433011]

[Link 1]: https://blog.csdn.net/qq_33212500/article/details/80422148
[20180523170619998]: /images/20220524/511afa99bc374fb99f9d3bfd12ee0496.png
[https_download.csdn.net_download_qq_33212500_10433011]: https://download.csdn.net/download/qq_33212500/10433011

发表评论取消回复

表情：

评论列表（有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue分页删除最后一条数据，返回上一级的分页

> 在VUE+element使用 Pagination 分页分页的时候当数据较多时使用element中的分页功能,在删除第二页的最后一条数据时,当前页数转成了上一页,可是页面

太过爱你忘了你带给我的痛/ 2024年03月30日 13:54/ 0 赞/ 35 阅读

相关 vue分页组件封装

vue分页组件封装座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的（爱笑，傻傻的）这样一个人 -------------------- 文章目录

刺骨的言语ヽ痛彻心扉/ 2022年12月28日 07:17/ 0 赞/ 182 阅读

相关 html++好看的分页页面,html+vue.js 实现漂亮分页功能可兼容IE

当功能比较简单，在单一html中使用vue.js分页展示数据，并未安装脚手架，或使用相关UI框架，此时需要手写一个分页器，不失为最合理最便捷的解决方案先看一下实现效果：

野性酷女/ 2022年10月06日 05:46/ 0 赞/ 50 阅读

相关 vue实现一个分页组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

女爷i/ 2022年06月04日 01:21/ 0 赞/ 263 阅读

相关 vue 分页组件（比上一版本好看一些）

之前写了一篇，是简单分页，地址如下 [点击打开链接 ][Link 1] https://blog.csdn.net/qq\_33212500/article/detai

亦凉/ 2022年05月24日 08:05/ 0 赞/ 47 阅读

相关利用vue实现的分页组件

/ 使用组件： <pagination></pagination> 组件中传入的属性有： 1、total ：一共有多少条数据：必选参数

男娘i/ 2022年05月18日 04:52/ 0 赞/ 248 阅读

相关 Vue实现分页组件

最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下: ![1055753-20170621203654163-89

た入场券/ 2022年05月14日 00:44/ 0 赞/ 326 阅读

相关 ElementUI分页组件+Vue

一. ElementUI分页组件 1 官网官网地址：http://element-cn.eleme.io/\/zh-CN 2 入门案例：第一步：创建vu

痛定思痛。/ 2022年04月17日 06:42/ 0 赞/ 383 阅读

相关 vue实现简单的分页组件

在日常的工作中，总会遇到分页的使用，这次开始学习vue，就自己动手写一个简单的分页组件。组件的样式采用的是 bootstrap 的分页，在此基础上添加分

短命女/ 2022年04月06日 06:58/ 0 赞/ 447 阅读

相关 vue基于element-ui二次封装分页组件和一些优化

先来看一下整体的需求分析 1. 有表格的地方，就有分页，怎么做到表格样式统一 2. 多个分页，代码重复，如何减少代码重复 3. 地址栏输入页码，如何去通知当前分页状

你的名字/ 2021年09月03日 07:37/ 0 赞/ 577 阅读