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

來源：懂視網責編：小OO 時間：2020-11-27 22:33:07

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

本文實例為大家分享了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>；<；/div>；<；<；div>；<；table>；<。

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了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>；<；/div>；<；<；div>；<；table>；<。

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

效果圖：