大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/187229.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...