vue.js表格分页示例

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

代码：
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.round（res.data.total / that.perPage）;//计算总页数}}}）;},//初始化init:function（）{this.loadList（1）;}}}）;vm.init（）;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。