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

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

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

1.注册一个组件

js

页码点击事件

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

}

}

});

模板：

HTML：

...