vue.js框架实现表单排序和分页效果

时间：2021-05-26

本文实例为大家分享了vue.js实现表单排序和分页的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="../lib/vue.min.js" type="text/javascript"></script> <title>表格组件</title> </head> <body> <div id="app"> <mydiv v-bind:info="info" v-bind:header="header" v-bind:num="num" v-bind:page="page"></mydiv> </div> <script type="text/x-template" id="mysc"> <div> <table> <tr> <th v-for='x in header' v-on:click="bit(x)">{{x.key}}</th> </tr> <tr v-for="y in fenye"> <th v-for="x in header">{{y[x.name]}}</th> </tr> </table> <button v-on:click="lastPage">上一页</button> <button v-on:click="nextPage">下一页</button> </div> </script> <script type="text/javascript"> Vue.component('mydiv',{ template:'#mysc', props:{ info:Array, header:Array, num:Number, page:Number, boolen:Boolean, tiaojian:String }, data: function() { return {} }, computed:{ fenye:function(){ var list=this.info; var paixu=this.tiaojian; for(var i = 1;i<list.length;i++){ for(var j=0;j<list.length-i;j++){ if(this.boolen){ if(list[j][paixu]>list[j+1][paixu]){ var k=list[j+1]; list[j+1]=list[j]; list[j]=k; } }else{ if(list[j][paixu] < list[j + 1][paixu]) { var k; k = list[j]; list[j] = list[j + 1]; list[j + 1] = k; } } } } var list2 = []; var start= this.num*(this.page-1); var end=start+this.num; if(end<list.length){ for(var i =start;i<end;i++){ list2.push(list[i]) } }else{ for(var i =start;i<list.length;i++){ list2.push(list[i]) } } return list2; } }, methods:{ bit:function(x){ this.boolen=!this.boolen; this.tiaojian=x.name; }, lastPage:function(){ console.log(this.num) if(this.page > 1) { this.page = this.page - 1; } }, nextPage: function() { var pageNum = this.info.length / this.num; if(this.page < pageNum) { this.page = this.page + 1; } } } }) var phone=new Vue({ el:'#app', data:{ boolen:true, num:5, page:1, info:[], header:[{ key: '名称', name:'name' }, { key: '价格', name:'price' }, { key: '数量', name:'num' }] } }) for(var i = 0;i<22;i++){ phone.info.push({ name:'手机'+i, num:i, price:100*i }) console.log(111) } </script> </body></html>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章