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

vue纯前端分页_基于vue的表格组件vue分页组件(比上一版本好看一些),贴代码vue-page.js代码如下varvuePage={ template:’<divclass="page-bar"id="pager">\ <spanclass="form-inline">\ <selectclass="form-control"v-model=&a

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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

样式完成!

页面效果如下

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/187229.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 数据挖掘/机器学习/算法岗2017校招面试总结「建议收藏」

    数据挖掘/机器学习/算法岗2017校招面试总结「建议收藏」目前就职于腾讯,想内推朋友可以发我简历(校招/社招都要),邮箱384375530@qq.com,注明岗位和工作城市。这个岗位叫法很多,算法岗,数据挖掘岗,机器学习岗,基础研究等等,总结一下从16年9月校招的面试情况。百度:师姐给我内推的,一面聊了2个半小时,基本在写代码。用MapReduce写好友推荐,在一堆单词里面找出现次数最多的k个;设计一个栈,O(1)时间返回最值;求多叉树深…

  • jmeter正则表达式提取器怎么使用_jmeter的正则表达式

    jmeter正则表达式提取器怎么使用_jmeter的正则表达式转载:https://www.cnblogs.com/du-hong/p/13217399.html允许用户使用正则表达式从服务器响应中提取值。作为后处理器,此元素将在其范围内的每个Sample请求之后执行,应用正则表达式,提取请求的值,生成模板字符串,并将结果存储到给定的变量名称中。1、我们先来看看这个正则表达式提取器长得是啥样子,路径:线程组>添加>后置处理器>正则表达式提取器,如下图所示:2、关键参数说明如下:Name:名称,可以随意设置,甚至为空;Comme

  • VC++键盘钩子demo

    VC++键盘钩子demoHHOOKkeyHook=NULL;//先声明函数,实现在下面LRESULTCALLBACKkeyProc(intnCode,WPARAMwParam,LPARAMlParam);//初始化钩子,关闭键盘事件(除了ALT+CTRL+DELETE)voidinitHook(){ keyHook=SetWindowsHookEx(WH_KEYBOARD_LL,keyProc,GetModuleHandle(NULL),0);}//销毁钩子voidun.

  • c# 调用Microsoft XPS Document Writer打印机,将Pdf文件转换成Xps文件「建议收藏」

    c# 调用Microsoft XPS Document Writer打印机,将Pdf文件转换成Xps文件「建议收藏」最近碰到个项目,其中有个需要将pdf文件转换成xps文件的功能,xps文件还算是新东西,所以基本没啥了解,通过一段时间的调查,本人算是找到了2个方法:  1)通过PDFNet第三发开发组件即可很容易的完成转换功能,并且还有其他针对pdf文件操作的功能,还是很强大的。当然啦,这个东     西是要买的,可以先下一个试用版先体验体验。    下载地址:http://w

  • ForkJoin 线程池[通俗易懂]

    ForkJoin 线程池[通俗易懂]一、分而治之严格来讲,分而治之不算一种模式,而是一种思想。它可以将一个大任务拆解为若干个小任务并行执行,提高系统吞吐量。主要讲两个场景,Master-Worker模式,ForkJoin线程池。ForkJoin线程池是jdk7之后引入的一个并行执行任务的框架,其核心思想也是将任务分割为子任务,有可能子任务还是很大,还需要进一步拆解,最终得到足够小的任务。将分割出来的子任务放入双端队列中,然后几个启动线程从双端队列中获取任务执行。子任务执行的结果放到一个队列里,另起线程从队列中获取数据,合并结果。

  • linux防火墙查看状态firewall、iptable[通俗易懂]

    linux防火墙查看状态firewall、iptable[通俗易懂]CentOS7的防火墙配置跟以前版本有很大区别,CentOS7这个版本的防火墙默认使用的是firewall,与之前的版本Centos6.x使用iptables不一样一、iptables防火墙1、基本操作#查看防火墙状态serviceiptablesstatus#停止防火墙serviceiptablesstop#启动防火墙serviceipt…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号