分页 一般都是调接口, 接口为这种格式

{code: 0, msg: "success",…}
code:0
data:{ content:[{content: "11", time: "22", },…] //数据列表
nextPage:1 //上一页
number:0  //第几页
numberOfElements:10
prevPage:1 //下一页
size:10 //页数
totalElements:257
totalPages:26 //总页数
}
msg:"success"
/**
* 分页
* @privat
* 全局用的分页组件
*/
var _pageTemplate='' +
'<div class="page-bar">' +
' <ul>' +
' <li v-if="pageNow>1"><a v-on:click="pageClick(pageNow-1)">上一页</a></li>' +
' <li v-if="pageNow==1"><a class="banclick">上一页</a></li>' +
' <li v-for="index in indexs" v-bind:class="{ \'active\': pageNow == index}">' +
' <a v-on:click="pageClick(index)">{{ index }}</a>' +
' </li>' +
' <li v-if="pageNow!=pages"><a v-on:click="pageClick(pageNow+1)">下一页</a></li>' +
' <li v-if="pageNow == pages"><a class="banclick">下一页</a></li>' +
' <li><a>共<i>{{pages}}</i>页</a></li>' +
' <li><a><span>跳转到第</span></a></li>' +
' <li><a><input type="text" v-model="inputNumber" @input="checkNumber()" style="width: 50px" maxlength="4"></a></li>' +
' <li><a><span>页</span></a></li>'+
' <li><a><span @click="pageClick(inputNumber)">确定</span></a></li>'+
' </ul>' +
'</div>';
Vue.component('vue-page',{
template:_pageTemplate,
props:["page_number","pages","jump"], //接收参数
data:function(){
return{
pageNow:this.page_number,
inputNumber:"",
num:this.page_number,
}
},
//监听事件
// watch: {
// cur: function(oldValue , newValue){
// console.log(arguments);
// }
// },
//方法处理
methods: {
checkNumber:function () {
var that =this;
var reg = /[^0-9.]/g; //正则检验是否数字
if (reg.test(that.inputNumber)) {
that.inputNumber="";
}
},
pageClick:function(e){
e=Number(e);
if(e>this.pages){
e=this.pages;
this.inputNumber=this.pages;
}
if(e != this.page_number||e==this.num){
this.pageNow =e;
}
this.jump(e)
}
},
//计算属性
computed: {
indexs: function(){
var left = 1;
var right = this.pages;
var ar = [];
if(this.pages>= 5){
if(this.pageNow > 3 && this.pageNow < this.pages-2){
left = this.pageNow - 2;
right = this.pageNow + 2
}else{
if(this.pageNow<=3){
left = 1;
right = 5
}else{
right = this.pages;
left = this.pages -4
}
}
}
while (left <= right){
ar.push(left);
left ++
}
return ar
} } });

这是封装得组件

 data:{
//分页
page:1,//第几页
pages: 10, //总页数
pagesize: 10,//分页数量 } 调用ajax 渲染数据
Journal:function (index) {
var that =this;
that.page=index;
Comm.runebws("url",{
          count:that.pagesize, //预定好跟接口
          page:that.page //预定好跟接口
},"GET",function (result) {
if(result.code==0){
that.Journals=result.data.content;
that.pages=result.data.totalPages; }
})
}

前端html代码

 <div v-for="item in Journals">
<div class="middle-list"><div class="middle-list-data">{{item.time}}</div></div>
<div class="middle-list"><div class="middle-list-name">{{item.ip}}</div></div>
<div class="middle-list"><div class="middle-list-go">{{item.content}}</div></div>
</div>
.page-bar{

}
ul,li{
margin: 0px;
padding: 0px;
}
li{
list-style: none
}
.page-bar li:first-child>a {
margin-left: 0px
}
.page-bar a{
border: 1px solid #6062A3;
text-decoration: none;
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
cursor: pointer
}
.page-bar a:hover{
/*background-color: #eee;*/
}
.page-bar a.banclick{
cursor:not-allowed;
}
.page-bar .active a{
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
.page-bar i{
font-style:normal;
color: #d44950;
margin: 0px 4px;
font-size: 12px;
}

vue 封装分页组件的更多相关文章

  1. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

  2. vue封装分页组件

    element提供的分页是已经封装好的组件,在这里再次封装是为了避免每个用到分页的页面点击跳转时都要写一遍跳转请求 分页组件 <!--分页组件--> <template> &l ...

  3. 基于iview 封装一个vue 表格分页组件

    iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

  4. semantic、vue 使用分页组件和日历插件

    最近正在试试semantic-ui,结合了vue,这里忍不住吐槽semantic和vue的友好度简直不忍直视,不过既然用了,这里就分享几个用到的插件了 1.分页组件(基于vue) var pageCo ...

  5. vue 自定义分页组件

    vue2.5自定义分页组件,可设置每页显示条数,带跳转框直接跳转到相应页面 Pagination.vue 效果如下图: all: small(只显示数字和上一页和下一页): html <temp ...

  6. vue自定义分页组件---切图网

    vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用.目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重 ...

  7. echars vue 封装全局组件 曲线 柱状图 同v-chars绿色系 配置样式

    Echars vue封装 ,曲线图 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. vue element-ui 分页组件封装

    <template> <el-pagination @size-change="handleSizeChange" @current-change="h ...

  9. Vue封装公共组件TarBar

    github:https://github.com/zwnsyw/TabBar 一.实现简单思路 1.在页面底部有一个单独的TabBar组件1.1自定义TabBar组件,在APP中使用1.2让TabB ...

随机推荐

  1. jzoj5987. 【WC2019模拟2019.1.4】仙人掌毒题 (树链剖分+概率期望+容斥)

    题面 题解 又一道全场切的题目我连题目都没看懂--细节真多-- 先考虑怎么维护仙人掌.在线可以用LCT,或者像我代码里先离线,并按时间求出一棵最小生成树(或者一个森林),然后树链剖分.如果一条边不是生 ...

  2. TCP协议怎么关闭?

    TCP协议是一个面向连接的传输层协议,那如果避免遭到破坏,该怎样正确关闭呢?一般正常关闭TCP连接是采用四次挥手机制,其实主体就两个,客户端和服务器交互传递,且连续四次,传递的东西是FIN数据包和AC ...

  3. PJzhang:尽快发现并下架那些侵犯公司权利的假冒APP

    猫宁!!! 参考链接:https://www.freebuf.com/articles/paper/203358.html http://www.cac.gov.cn/2019-01/25/c_112 ...

  4. [Chrome](CSS) 解决Chrome font-size 小于 12px 无效

    Chrome中 font-size 小于 12px 会失效. 解决的办法一种是: -webkit-text-size-adjust:none; (但是Chrome27之后取消了支持) 利用CSS3的缩 ...

  5. Codeforces 1138B(列方程枚举)

    构造模拟要分情况讨论感觉不是够本质,然后官解是因为只有四个量所以可以根据限制条件列两个方程,再枚举一下解就可以了. const int maxn = 5000 + 5; int n, c[maxn], ...

  6. ItemsControl Grouping分组

    ItemsControl属性GroupStyle Grouping再ItemsControl源代码 public class ItemsControl : Control, IAddChild, IG ...

  7. 初识requestAnimationFrame

    转载地址:https://blog.csdn.net/vhwfr2u02q/article/details/79492303 核心概念: 1.CPU节能:在页面不刷新时不执行回调(页面在隐藏.最小化等 ...

  8. 【学习笔记】八:浏览器对象模型BOM

    1.window对象 window是BOM的核心,它既是JS访问浏览器的一个接口,又是ES规定的Global对象. 1)全局作用域对象 a.所有在全局作用域中声明的变量.函数都会成为window对象的 ...

  9. HDU 4044 GeoDefense (树形DP,混合经典)

    题意: 给一棵n个节点的树,点1为敌方基地,叶子结点都为我方阵地.我们可以在每个结点安放炸弹,每点至多放一个,每个结点有ki种炸弹可选,且每种炸弹有一个花费和一个攻击力(1点攻击力使敌人掉1点hp). ...

  10. 清空iptables

    /sbin/iptables -P INPUT ACCEPT /sbin/iptables -F iptables -L