vue php 分页,vue实现分页

html页面：

data数据：

方法：

计算属性：

样式：

html代码：

• 上一页
• 上一页

• {{ index }}

• 下一页
• 下一页
• 共{{all}}页

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

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

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;

}

原文链接:https://www.cnblogs.com/web-aqin/p/10769435.html

如有疑问请与原作者联系

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有