vue.js表格分页及ajax异步加载数据怎么实现

这篇“vue.js表格分页及ajax异步加载数据怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue.js表格分页及ajax异步加载数据怎么实现”文章吧。

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--">&laquo;</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:">&raquo;</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 值。

以上就是关于“vue.js表格分页及ajax异步加载数据怎么实现”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。