效果图:

html页面:

data数据:

方法:

计算属性:

样式:

html代码:

<!--分页-->
<div class="page-bar">
<ul>
<li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>
<li v-if="cur==1"><a class="banclick">上一页</a></li>
<li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
<a v-on:click="btnClick(index)">{{ index }}</a>
</li>
<li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>
<li v-if="cur == all"><a class="banclick">下一页</a></li>
<li><a>共<i>{{all}}</i>页</a></li>
</ul>
</div>

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

js代码:

data () {
return {
all: 10, //总页数
cur: 1,//当前页码
totalPage: 0,//当前条数
}
},
methods: {
//请求数据
dataListFn: function(index){
this.$axios.get("http://127.0.0.1:8090/demand/selectListByPage",
{
params:{
page: index,
limit:'10',
state: 0
}
}).then((res) => {
if(res.data.message == "success"){
this.dataList=[];
for(let i=0;i<res.data.data.length;i++){
this.dataList.push(res.data.data[i])
}
this.all = res.data.totalPage;//总页数
this.cur = res.data.pageNum;
this.totalPage = res.data.totalPage;
}

});
},
//分页
btnClick: function(data){//页码点击事件
if(data != this.cur){
this.cur = data
}
//根据点击页数请求数据
this.dataListFn(this.cur.toString());
},
pageClick: function(){
//根据点击页数请求数据
this.dataListFn(this.cur.toString());
}
},
computed: {
//分页
indexs: function(){
var left = 1;
var right = this.all;
var ar = [];
if(this.all>= 5){
if(this.cur > 3 && this.cur < this.all-2){
left = this.cur - 2
right = this.cur + 2
}else{
if(this.cur<=3){
left = 1
right = 5
}else{
right = this.all
left = this.all -4
}
}
}
while (left <= right){
ar.push(left)
left ++
}
return ar
}
}

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

css代码:

/*分页*/
.page-bar{
margin:40px auto;
margin-top: 150px;

}
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 #ddd;
text-decoration: none;
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #5D6062;
cursor: pointer;
margin-right: 20px;
}
.page-bar a:hover{
background-color: #eee;
}
.page-bar a.banclick{
cursor:not-allowed;
}
.page-bar .active a{
color: #fff;
cursor: default;
background-color: #E96463;
border-color: #E96463;
}
.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. JS(vue iview)分页解决方案

    JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...

  3. 基于vue的分页插件

    相信大家用过很多jquery的分页插件,那这次就用一用基于vue的分页插件. 这里的环境用的是springboot 首先要引入pagehelper的jar文件,版本是1.2.3,配置文件也需要配置一下 ...

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

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

  5. vue day5 分页控件 更新 PagedList.mvc 仿

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. vue day6 分页显示

    @{ ViewBag.Title = "Home Page"; Layout = null; } <!DOCTYPE html> <html> <he ...

  7. vue day5 分页控件

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. Vue element 分页

    Vue单页面,有一个带分页的表格,表格内数据关联页码,套路如下: 代码如下: <div class="c-table-list auth-list m-bottom-20"& ...

  9. 使用Layui和Vue实现分页

    原理就是利用Layui的分页组件和Vue组件的模板渲染功能. 我下面直接贴代码,比较直观. index.html <!DOCTYPE html> <html> <head ...

  10. vue 封装分页组件

    分页 一般都是调接口, 接口为这种格式 {code: 0, msg: "success",…} code:0 data:{ content:[{content: "11& ...

随机推荐

  1. c# 后台异步请求接口

    第一步:引用程序集:Systen.Net.Http 第一种方式: 异步 Get请求 HttpClient client = new HttpClient();            //client. ...

  2. Linux 启动脚本及chkconfig命令之自启动服务

    有时我们会碰到这样的情况,系统启动的时候报一大堆无法连接mysql的错误,问题在mysql数据库还没有启动的时候已经启动了一些需要连接mysql数据库的服务.这样我们就得修改启动顺序,把需要连接mys ...

  3. iptable防火墙案例

    [root@WX020 firewall]# cat /etc/sysconfig/iptables# Firewall configuration written by system-config- ...

  4. Fiddler基础教程

    一.Fiddler的基本介绍 Fiddler的官方网站:  www.fiddler2.com Fiddler官方网站提供了大量的帮助文档和视频教程, 这是学习Fiddler的最好资料. Fiddler ...

  5. JavaScript运行机制的学习

    今天在偶然在网上看到一个JavaScript的面试题,尝试着看了一下,很正常的就做错了,然后给我们前端做,哈哈,他居然也顺理成章做的错了,代码大概是这样的 /*1 下面代码会怎样执行?执行结果是什么* ...

  6. [转]SQL Server 数据库定时自动备份

    前提:在使用下面的备份方式之前需要确保你的Sqlserver Agent服务启动,切设置为自动启动.否则当你服务器重启了但是Agent服务没有启动,那么自动备份任务就不会执行 (一)使用TSql代码自 ...

  7. 铁乐学Python_day08作业

    1. 文件a.txt内容:每一行内容分别为商品名字,价钱,个数. apple 10 3 tesla 100000 1 mac 3000 2 lenovo 30000 3 chicken 10 3 通过 ...

  8. linux之安装nali本地解析IP归属

    参考博文:http://www.dwhd.org/20150802_014526.html 1.安装nali wget http://www.dwhd.org/wp-content/uploads/2 ...

  9. 深入浅出TFS——创建WorkItem

    使用场景:在项目交付流程当中,我们在准备部署项目的时候,比如需要依次部署到DEV.QA和PROD共3个不同的环境.我们需要由专门负责部署的部门Integration Team的人员来操作.这个时候我们 ...

  10. ord 字符转code chr : code转字符

    print(ord('刀')) # ord 字符转Unicode # 20992 print(chr(20992)) # Unicode 转成chr(字符)