vue.js中怎么实现分页显示

JavaScript0100

vue.js中怎么实现分页显示,第1张

<vuetable listdata="{{datalist}}" clickcallback="{{callback}}"></vuetable>

<pages pages="{{@ pages}}" clickhandle="{{search}}"></pages>

其中vuetable组件负责数据展示功能,里面内容暂且不表,pages组件实现分页功能,如下:

<div>

<ul>

<li v-on="click:leftclick" v-show="leftbtn"><a>《</a></li>

<li class="pageindex" v-repeat="showlength" v-on="click:clickhandle(currentIndex+$index,$event)"><a>{{currentIndex+$index}}</a></li>

<li v-on="click:rightclick" v-show="rightbtn"><a></a></li>

</ul>

</div>

class为pageindex的 li 的点击事件里面将 要显示的index 传给 props传递过来的 clickhandle,

clickhandle会根据index,返回后更新 datalist,完成分页功能。

分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理。

效果:

代码:

1.注册一个组件

js

Vue.component('pagination',{

template:'#paginationTpl',

replace:true,

props:['cur','all','pageNum'],

methods:{

//页码点击事件

btnClick:

function(index){

if(index

!=

this.cur){

this.cur

=

index

}

}

},

watch:{

"cur"

:

function(val,oldVal)

{

this.$dispatch('page-to',

val)

}

},

computed:{

indexes

:

function(){

var

list

=

[]

//计算左右页码

var

mid

=

parseInt(this.pageNum

/

2)//中间值

var

left

=

Math.max(this.cur

-

mid,1)

var

right

=

Math.max(this.cur

+

this.pageNum

-

mid

-1,this.pageNum)

if

(right

>

this.all

)

{

right

=

this.all}

while

(left

<=

right){

list.push(left)

left

++

}

return

list

},

showLast:

function(){

return

this.cur

!=

this.all

},

showFirst:

function(){

return

this.cur

!=

1

}

}

})

模板:

<script

type="text/template"

id="paginationTpl">

<nav

v-if="all

>

1">

<ul

class="pagination">

<li

v-if="showFirst"><a

href="javascript:"

@click="cur--">«</a></li>

<li

v-for="index

in

indexes"

:class="{

'active':

cur

==

index}">

<a

@click="btnClick(index)"

href="javascript:">{{

index

}}</a>

</li>

<li

v-if="showLast"><a

@click="cur++"

href="javascript:">»</a></li>

<li><a>共<i>{{all}}</i>页</a></li>

</ul>

</nav>

</script>

HTML:

<div

id='item_list'>

...

<pagination

:cur="1"

:all="pageAll"

:page-num="10"

@page-to="loadList"></pagination>

</div>

当点击分页链接的时候,通过watch

cur,子组件分发

page-to

事件,通过

@page-to="loadList"

标签指定使用父组件

loadList

方法处理事件,父组件接收到page值然后ajax加载数据,根据服务端返回计算并更新自身的

pageAll

值,因为子组件prop通过

:all="pageAll"

动态绑定了父组件的pageAll对象,所以子组件会联动更新。

附上一个简单的表格组件例子:

var

vm

=

new

Vue({

el:

"#item_list",

data:

{

items

:

[],

//分页参数

pageAll:0,

//总页数,根据服务端返回total值计算

perPage:10

//每页数量

},

methods:

{

loadList:function(page){

var

that

=

this

$.ajax({

url

:

"/getList",

type:"post",

data:{"page":page,"perPage":this.perPage},

dataType:"json",

error:function(){alert('请求列表失败')},

success:function(res){

if

(res.status

==

1)

{

that.items

=

res.data.list

that.perPage

=

res.data.perPage

that.pageAll

=

Math.ceil(res.data.total

/

that.perPage)//计算总页数

}

}

})

},

//初始化

init:function(){

this.loadList(1)

}

}

})

vm.init()

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

1.首先写好分页  页码

2.定义好,所有数据数组,总条数,每页数量,当前页

3.根据后台数据的长度 确定好表格总条数

4.在computer中,定义好每页的开始位置    就是beginIndex。0,10,20这样自带的

然后计算每页的数据的数量,把原来的后台的数据进行浅拷贝,进行截取,就形成了每页的数据,并自动去渲染每页,

5数据表格中的数据就不是,,  this.rightsList = res.data.data这个了,,而是。。currentList,

6.就是页码改变,每页数量改变的方法了

最后就OK了