首页 > 开发 > AJAX > 正文

vue.js 表格分页ajax 异步加载数据

2024-09-01 08:33:47
字体:
来源:转载
供稿:网友

Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。

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

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 = this.cur - mid;var right = Math.max(this.cur + this.pageNum - mid -1,this.pageNum);if (left < 1) {left = 1}if (right > this.all ) { right = this.all}while (left <= right){list.push(left)left ++}return list;},showLast: function(){if(this.cur == this.all){return false}return true},showFirst: function(){if(this.cur == 1){return false}return true}}});

模板:

<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='parentEle'>...<pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination></div>

当点击分页链接的时候,会触发

page-to

事件,而我们在html标签中指定了使用父组件

loadList

方法处理事件,我们只要在组件中把当前页码传给父组件即可,父组件负责ajax加载数据,并更新自身的 pageAll 值。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表