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

JavaScript015

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()

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