vue.js框架實現表單排序和分頁效果

2019-11-19 15:51:19

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了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>

效果圖：