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

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

效果：

代码：

1.注册一个组件

射流研究…

Vue.component('pagination '，{ template:'#paginationTpl '，replace:true，prop 3360[' cur '，' all '，' pageNum']，methods:{ //页码点击事件btnClick:函数(索引){ if(索引！=这个。{这个。cur=索引；} }，watch:{ 'cur' :函数(瓦尔，奥尔德瓦尔){这.$dispatch('page-to '，val)；} }，计算出： { indexes : function(){ var list=[]；//计算左右页码var mid=ParSeint(这。页码/2)；//中间值var left=Math.max(this.cur - mid，1)；var right=数学。麦克斯(这个。弯曲这个。页码-1中，这个。页码)；如果(对这个。好吧。all } while(左=右){ list。推(左)；向左；}返回列表；}，showLast:函数(){返回这个，该死！=this.all}，showFirst:函数(){返回这个，该死！=1;} } });模板：

脚本类型=' text/template ' id=' pagining TPL ' nav v-if=' all 1 ' ul class=' pagining ' Li v-if=' showFirst ' a href=' JavaScript : ' @ click=' cur-'/a/Li v-for=' indexes in indexes ' : class=' { ' active ' : cur==index } ' a @ click=' btnClick(index)' href=' JavaScript : ' { index } '共我{{all}}/i页/a/li /ul /nav/scriptHTML:

div id='item_list '.分页： cur=' 1 ' : all=' page all ' : page-num=' 10 ' @ page-to=' LoadList '/分页/div当点击分页链接的时候，通过观看弯曲的，子组件分发页面到事件，通过@page-to='loadList '标签指定使用父组件加载列表方法处理事件，父组件接收到页，面，张，版值然后创建交互式、快速动态网页应用的网页开发技术加载数据，根据服务端返回计算并更新自身的页面全部值，因为子组件支柱通过：all='pageAll '动态绑定了父组件的页面全部对象，所以子组件会联动更新。

附上一个简单的表格组件例子：

var VM=new Vue({ El : ' # item _ list '，data: { items : []，//分页参数pageAll:0，//总页数，根据服务端返回总数值计算垂直：10 //每页数量}，方法： { LoadList : FuncTion(page){ var=this；$.ajax({ url : '/getList '，type:'post '，data:{'page':page，' perPage':this.perPage}，dataType:'json '，error:function(){alert('请求列表失败)}，成功：函数(RES){ if(RES . status==1){即。项目=资源数据。列表；那个。Perpage=RES . data。犯罪；那个。page all=数学。天花板数据。总计/那个。perp age)；//计算总页数} } });}, //初始化init :函数(){ this。load list(1)；} } });虚拟机。init()；感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！