Javascript vue.js表格分页,ajax异步加载数据
程序员文章站
2022-06-29 16:22:19
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理。
效果:
代码:
1.注册一个组件...
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理。
效果:
代码:
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();
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!