您好,登錄后才能下訂單哦!
本文實例為大家分享了vue.js實現(xiàn)表單排序和分頁的具體代碼,供大家參考,具體內(nèi)容如下
<!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: '數(shù)量', name:'num' }] } }) for(var i = 0;i<22;i++){ phone.info.push({ name:'手機(jī)'+i, num:i, price:100*i }) console.log(111) } </script> </body> </html>
效果圖:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。