Vue.js分頁組件實現：diVuePagination

来源:https://www.cnblogs.com/tbd-love/archive/2018/01/09/8252369.html
-Advertisement-
Play Games

完整版下載地址：https://gitee.com/dgx/diVuePagination 完整版演示地址：http://dgx.gitee.io/divuepagination/#/ 一.準備工總 利用vue-cli和webpack如何快速搭建一個項目我們已經有過介紹： 為vue開發準備的一份es ...


完整版下載地址：https://gitee.com/dgx/diVuePagination

完整版演示地址：http://dgx.gitee.io/divuepagination/#/

 

一.準備工總

利用vue-cli和webpack如何快速搭建一個項目我們已經有過介紹：

為vue開發準備的一份es6語法筆記  https://my.oschina.net/tbd/blog/1541903

Vue.js構建項目筆記1:vue-cli  https://my.oschina.net/tbd/blog/1552953

Vue.js構建項目筆記2:vuejs+vue-router  https://my.oschina.net/tbd/blog/1553267

Vue.js構建項目筆記3:vuejs+vue-router +vuex  https://my.oschina.net/tbd/blog/1553518

至於vue的語法學習，官網讓你最快速掌握：https://cn.vuejs.org/v2/guide/

 

二.創建初始化項目

這裡不在詳細說明，我們的分頁演示只需要vue和vue-router就可以了，我們直接構建項目和設置配置。

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'
//路由配置

Vue.use(VueRouter); 

var routes = [
  { path: '/', component: pageHome},
  { path: '/pageNews', component: pageNews},
  { path: '/pageInfo', component: pageInfo}
]
var router = new VueRouter({
  routes: routes // （縮寫）相當於 routes: routes

})


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

 

App.vue:

<template>
  <div id="app">
  	<h3>{{msg}}</h3>
    <ul>
		<li><router-link to="/">pageHome</router-link></li>
		<li><router-link to="/pageNews">pageNews</router-link></li>
		<li><router-link to="/pageInfo">pageInfo</router-link></li>
	</ul>
	<div>
		<router-view></router-view>
	</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: '分頁組件：DiVuePage '
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

pageHome.vue:

<template>
  <div class="page">
  		<p>//模擬ajax數據 1-7頁</p>
  		<ul class="ull">
			<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{item.text}}</span></li>
		</ul>
  </div>
</template>

<script>
export default {
  name: 'pageHome',
  data () {
    return {
	  currentpage:0,
      list: [],
	  allpage:"",
	  nextpage:false
    }
  },
  methods:{
  	getajaxlist:function(currentpage){
			var that=this;
		
			var list=[];
			var allpage="";
			var nextpage="";
			//模擬ajax數據 1-7頁
			setTimeout(function(){		
				if(currentpage==1){
					list=[
						{id:1,text:"111111"},
						{id:2,text:"222222"},
						{id:3,text:"3333333333"},
						{id:4,text:"44444444444"},
						{id:5,text:"555555555"},
					]
					allpage=7
					nextpage=true;
				}else if(currentpage==2){
					list=[
						{id:1,text:"66666666"},
						{id:2,text:"7777777777"},
						{id:3,text:"8888888888"},
						{id:4,text:"99999999999"},
						{id:5,text:"101010"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==3){
					list=[
						{id:1,text:"111111111111111"},
						{id:2,text:"121212"},
						{id:3,text:"131313"},
						{id:4,text:"141414"},
						{id:5,text:"15515"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==4){
					list=[
						{id:1,text:"161616"},
						{id:2,text:"171717"},
						{id:3,text:"181818"},
						{id:4,text:"191919"},
						{id:5,text:"202020"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==5){
					list=[
						{id:1,text:"2121"},
						{id:2,text:"22222"},
						{id:3,text:"232323"},
						{id:4,text:"242424"},
						{id:5,text:"252525"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==6){
					list=[
						{id:1,text:"2626"},
						{id:2,text:"2727"},
						{id:3,text:"2828"},
						{id:4,text:"2929"},
						{id:5,text:"3030"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==7){
					list=[
						{id:1,text:"3131"},
						{id:2,text:"3232"}
					]
					allpage=7
					nextpage=false;				
				};
			
				that.currentpage=currentpage;
				that.list=list;
				that.allpage=allpage;
				that.nextpage=nextpage;
				  
				  
			},200);		
	}
  },
  created:function(){
  		//模擬生成第一頁數據
  		this.getajaxlist(1);
  }
}
</script>

<style>
	ul{ list-style:none;}
	ull{ margin:100px auto; width:1000px;line-height:30px;}
	li{height:30px;}
	.l{float:left;width:300px;}
	.r{float:left;width:600px;}
</style>

 

pageInfo.vue:

<template>
  <div class="page">
  		<p>//模擬ajax數據 1-3頁</p>
  		<ul class="ull">
			<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{item.text}}</span></li>
		</ul>
  </div>
</template>

<script>
export default {
  name: 'pageInfo',
  data () {
    return {
	  currentpage:0,
      list: [],
	  allpage:"",
	  nextpage:false
    }
  },
  methods:{
  	getajaxlist:function(currentpage){
			var that=this;
		
			var list=[];
			var allpage="";
			var nextpage="";
			//模擬ajax數據 1-3頁
			setTimeout(function(){		
				if(currentpage==1){
					list=[
						{id:1,text:"111111"},
						{id:2,text:"222222"},
						{id:3,text:"3333333333"},
						{id:4,text:"44444444444"},
						{id:5,text:"555555555"},
					]
					allpage=3
					nextpage=true;
				}else if(currentpage==2){
					list=[
						{id:1,text:"66666666"},
						{id:2,text:"7777777777"},
						{id:3,text:"8888888888"},
						{id:4,text:"99999999999"},
						{id:5,text:"101010"},
					]
					allpage=3
					nextpage=true;				
				}else if(currentpage==3){
					list=[
						{id:1,text:"111111111111111"},
						{id:2,text:"121212"},
						{id:3,text:"131313"},
						{id:4,text:"141414"},
						{id:5,text:"15515"},
					]
					allpage=3
					nextpage=false;				
				}
			
				that.currentpage=currentpage;
				that.list=list;
				that.allpage=allpage;
				that.nextpage=nextpage;
				  
				  
			},200);		
	}
  },
  created:function(){
  		//模擬生成第一頁數據
  		this.getajaxlist(1);
  }
}
</script>

<style>
	ul{ list-style:none;}
	ull{ margin:100px auto; width:1000px;line-height:30px;}
	li{height:30px;}
	.l{float:left;width:300px;}
	.r{float:left;width:600px;}
</style>

 

pageNews.vue:

<template>
  <div class="page">
  		<p>模擬ajax數據 1頁</p>
  		<ul class="ull">
			<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{item.text}}</span></li>
		</ul>
  </div>
</template>

<script>
export default {
  name: 'pageNews',
  data () {
    return {
	  currentpage:0,
      list: [],
	  allpage:"",
	  nextpage:false
    }
  },
  methods:{
  	getajaxlist:function(currentpage){
			var that=this;
		
			var list=[];
			var allpage="";
			var nextpage="";
			//模擬ajax數據 1頁
			setTimeout(function(){		
				if(currentpage==1){
					list=[
						{id:1,text:"111111"},
						{id:2,text:"222222"},
						{id:3,text:"3333333333"}
					]
					allpage=1
					nextpage=false;
				}
			
				that.currentpage=currentpage;
				that.list=list;
				that.allpage=allpage;
				that.nextpage=nextpage;
				  
				  
			},200);		
	}
  },
  created:function(){
  		//模擬生成第一頁數據
  		this.getajaxlist(1);
  }
}
</script>

<style>
	ul{ list-style:none;}
	ull{ margin:100px auto; width:1000px;line-height:30px;}
	li{height:30px;}
	.l{float:left;width:300px;}
	.r{float:left;width:600px;}
</style>

 

預覽效果：

 

三.分頁靜態結構和樣式

divuePage.vue:

<template>
	<div class="DiReactPage">
		<div class="DiReactPage-btn">第一頁</div>
		<div class="DiReactPage-btn disable">上一頁</div>
		<div class="DiReactPage-page">
			<span class="active">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
		<div class="DiReactPage-btn">下一頁</div>
		<div class="DiReactPage-btn">最後一頁</div>
		<div class="DiReactPage-btn">總4頁</div>
		<input class="DiReactPage-input" type="text" />
		<button class="DiReactPage-btn">跳轉</button>
	</div>
</template>

<script>
export default {
  name: 'divuePage',
  data () {
    return {
	  pages:[1,2,3,4,5]
    }
  },
  methods:{
  	
  }
}
</script>

<style>
	.DiReactPage{ height:30px; line-height:30px; text-align:center;}
	.DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
	.DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
	.DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
	.DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
	.DiReactPage .DiReactPage-page span.active{ color:#09F; }
	.DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

 

main.js註冊：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'

//註冊組件
import divuePage from './divuePage.vue'
Vue.component('divue-page', divuePage)
//路由配置

Vue.use(VueRouter); 

var routes = [
  { path: '/', component: pageHome},
  { path: '/pageNews', component: pageNews},
  { path: '/pageInfo', component: pageInfo}
]
var router = new VueRouter({
  routes: routes // （縮寫）相當於 routes: routes

})


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

 

pageHome.vue引用：

<template>
  <div class="page">
  		<p>//模擬ajax數據 1-7頁</p>
  		<ul class="ull">
			<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{item.text}}</span></li>
		</ul>
		<divue-page></divue-page>
  </div>
</template>

<script>
export default {
  name: 'pageHome',
  data () {
    return {
	  currentpage:0,
      list: [],
	  allpage:"",
	  nextpage:false
    }
  },
  methods:{
  	getajaxlist:function(currentpage){
			var that=this;
		
			var list=[];
			var allpage="";
			var nextpage="";
			//模擬ajax數據 1-7頁
			setTimeout(function(){		
				if(currentpage==1){
					list=[
						{id:1,text:"111111"},
						{id:2,text:"222222"},
						{id:3,text:"3333333333"},
						{id:4,text:"44444444444"},
						{id:5,text:"555555555"},
					]
					allpage=7
					nextpage=true;
				}else if(currentpage==2){
					list=[
						{id:1,text:"66666666"},
						{id:2,text:"7777777777"},
						{id:3,text:"8888888888"},
						{id:4,text:"99999999999"},
						{id:5,text:"101010"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==3){
					list=[
						{id:1,text:"111111111111111"},
						{id:2,text:"121212"},
						{id:3,text:"131313"},
						{id:4,text:"141414"},
						{id:5,text:"15515"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==4){
					list=[
						{id:1,text:"161616"},
						{id:2,text:"171717"},
						{id:3,text:"181818"},
						{id:4,text:"191919"},
						{id:5,text:"202020"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==5){
					list=[
						{id:1,text:"2121"},
						{id:2,text:"22222"},
						{id:3,text:"232323"},
						{id:4,text:"242424"},
						{id:5,text:"252525"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==6){
					list=[
						{id:1,text:"2626"},
						{id:2,text:"2727"},
						{id:3,text:"2828"},
						{id:4,text:"2929"},
						{id:5,text:"3030"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==7){
					list=[
						{id:1,text:"3131"},
						{id:2,text:"3232"}
					]
					allpage=7
					nextpage=false;				
				};
			
				that.currentpage=currentpage;
				that.list=list;
				that.allpage=allpage;
				that.nextpage=nextpage;
				  
				  
			},200);		
	}
  },
  created:function(){
  		//模擬生成第一頁數據
  		this.getajaxlist(1);
  }
}
</script>

<style>
	ul{ list-style:none;}
	ull{ margin:100px auto; width:1000px;line-height:30px;}
	li{height:30px;}
	.l{float:left;width:300px;}
	.r{float:left;width:600px;}
</style>

 

效果預覽：

 

四.分頁組件實現邏輯分析

我們分析一下如何實現我們的分頁組件：

從分頁組件考慮：

分頁組件需要顯示頁數，那麼就需要傳遞給分頁組件總用多少頁這個狀態，

上一頁和下一頁存在不可用狀態，在第一頁上一頁不可用，所以要把當前所在頁數傳遞，同樣頁數的焦點位置也需要它判斷，

然後就是方法，我們頁數和按鈕的點擊都是發起請求，攜帶的參數就是當前點擊的頁數，

1.總頁數，當前所在頁，可在父組件傳遞進入

2.發起請求的方法可以通過組件交互通信實現

1的數據都是介面會返回給我們的，我們直接以屬性傳遞即可：

2的實現也很簡單，我們其實已經處理模擬使用過了：

我們只需要自定義事件，讓分頁組件$emit即可：

pageHome.vue:

<template>
  <div class="page">
  		<p>//模擬ajax數據 1-7頁</p>
  		<ul class="ull">
			<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{item.text}}</span></li>
		</ul>
		<divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>
  </div>
</template>

<script>
export default {
  name: 'pageHome',
  data () {
    return {
	  currentpage:0,
      list: [],
	  allpage:"",
	  nextpage:false
    }
  },
  methods:{
  	getajaxlist:function(currentpage){
			var that=this;
		
			var list=[];
			var allpage="";
			var nextpage="";
			//模擬ajax數據 1-7頁
			setTimeout(function(){		
				if(currentpage==1){
					list=[
						{id:1,text:"111111"},
						{id:2,text:"222222"},
						{id:3,text:"3333333333"},
						{id:4,text:"44444444444"},
						{id:5,text:"555555555"},
					]
					allpage=7
					nextpage=true;
				}else if(currentpage==2){
					list=[
						{id:1,text:"66666666"},
						{id:2,text:"7777777777"},
						{id:3,text:"8888888888"},
						{id:4,text:"99999999999"},
						{id:5,text:"101010"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==3){
					list=[
						{id:1,text:"111111111111111"},
						{id:2,text:"121212"},
						{id:3,text:"131313"},
						{id:4,text:"141414"},
						{id:5,text:"15515"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==4){
					list=[
						{id:1,text:"161616"},
						{id:2,text:"171717"},
						{id:3,text:"181818"},
						{id:4,text:"191919"},
						{id:5,text:"202020"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==5){
					list=[
						{id:1,text:"2121"},
						{id:2,text:"22222"},
						{id:3,text:"232323"},
						{id:4,text:"242424"},
						{id:5,text:"252525"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==6){
					list=[
						{id:1,text:"2626"},
						{id:2,text:"2727"},
						{id:3,text:"2828"},
						{id:4,text:"2929"},
						{id:5,text:"3030"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==7){
					list=[
						{id:1,text:"3131"},
						{id:2,text:"3232"}
					]
					allpage=7
					nextpage=false;				
				};
			
				that.currentpage=currentpage;
				that.list=list;
				that.allpage=allpage;
				that.nextpage=nextpage;
				  
				  
			},200);		
	}
  },
  created:function(){
  		//模擬生成第一頁數據
  		this.getajaxlist(1);
  }
}
</script>

<style>
	ul{ list-style:none;}
	ull{ margin:100px auto; width:1000px;line-height:30px;}
	li{height:30px;}
	.l{float:left;width:300px;}
	.r{float:left;width:600px;}
</style>

 

 

五.分頁組件邏輯編寫

divuePage.vue我們接受了這些傳遞的內容，總頁數和當前所在頁，然後點擊第一頁觸發自定義事件，傳遞給父組件一個1，獲取第一頁數據：

<template>
	<div class="DiReactPage">
		<div class="DiReactPage-btn" v-on:click="clickFirst">第一頁</div>
		<div class="DiReactPage-btn disable">上一頁</div>
		<div class="DiReactPage-page">
			<span class="active">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
		<div class="DiReactPage-btn">下一頁</div>
		<div class="DiReactPage-btn">最後一頁</div>
		<div class="DiReactPage-btn">總4頁</div>
		<input class="DiReactPage-input" type="text" />
		<button class="DiReactPage-btn">跳轉</button>
	</div>
</template>

<script>
export default {
  name: 'divuePage',
  props:["currentpage","allpage"],
  methods:{
  	clickFirst:function(){//點擊第一頁	
		this.$emit("getajaxlist",1);
	}
  }
}
</script>

<style>
	.DiReactPage{ height:30px; line-height:30px; text-align:center;}
	.DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
	.DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
	.DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
	.DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
	.DiReactPage .DiReactPage-page span.active{ color:#09F; }
	.DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

 

1.頁數顯示

我們的首要工作就是把頁數顯示出來，我們已經接收了總頁數，其實這個問題很容易解決，我們設置一個計算屬性，屬性依據總頁數生成一個數組，從1到n即可：

顯示：

這樣還不夠健壯，還有一個就是總頁數5做分界線，大於5就顯示當前到後4個，

比如在第3頁，顯示：3 4 5 6 7

第2頁，顯示：2 3 4 5 6

好了我們加入一些小的邏輯判斷：

我們要給當前頁加一個類名標識，已經獲取當前的頁數了，我們加一個判斷就可以了，在v-for中：

我們在加入點擊事件，拿到點擊的item就是要請求後臺數據的參數page:

定義這個方法：

完整代碼：

<template>
	<div class="DiReactPage">
		<div class="DiReactPage-btn" v-on:click="clickFirst">第一頁</div>
		<div class="DiReactPage-btn disable">上一頁</div>
		<div class="DiReactPage-page">
			<span v-for="(item,index) in pages" v-bind:class="{active:currentpage==item}" v-on:click="clickCurrent(item)">{{item}}</span>
		</div>
		<div class="DiReactPage-btn">下一頁</div>
		<div class="DiReactPage-btn">最後一頁</div>
		<div class="DiReactPage-btn">總4頁</div>
		<input class="DiReactPage-input" type="text" />
		<button class="DiReactPage-btn">跳轉</button>
	</div>
</template>

<script>
export default {
  name: 'divuePage',
  computed:{
  	pages:function(){
		var arr=[];
		if(this.allpage>5){
			if(this.currentpage+5>this.allpage){
				for(var i=this.currentpage;i<=this.allpage;i++){
					arr.push(i);
				};
			}else{
				for(var i=this.currentpage;i<this.currentpage+5;i++){
					arr.push(i);
				};
			};
		}else{
			for(var i=1;i<=this.allpage;i++){
				arr.push(i);
			};
		}
		return arr;
	}
  },
  props:["currentpage","allpage"],
  methods:{
  	clickFirst:function(){//點擊第一頁	
		this.$emit("getajaxlist",1);
	},
	clickCurrent:function(item){
		this.$emit("getajaxlist",item);
	}
  }
}
</script>

<style>
	.DiReactPage{ height:30px; line-height:30px; text-align:center;}
	.DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
	.DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
	.DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
	.DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
	.DiReactPage .DiReactPage-page span.active{ color:#09F; }
	.DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

 

效果測試：

2.第一頁和最後一頁處理

這個很簡單，只是傳遞page參數，我們已經獲取總頁數，直接設置即可！

3.上一頁和下一頁處理

這個對比第一頁需要加入特殊的處理，當前是第一頁，這個按鈕就不可用狀態，下一頁一樣的邏輯判斷當前是不是在最後一頁：

調用位置加入事件，在加一個是否可用的類名：

全部代碼：

<template>
	<div class="DiReactPage">
		<div class="DiReactPage-btn" v-on:click="clickFirst">第一頁</div>
		<div class="DiReactPage-btn" v-on:click="clickPrev" v-bind:class="{disable:currentpage==1}">上一頁</div>
		<div class="DiReactPage-page">
			<span v-for="(item,index) in pages" v-bind:class="{active:currentpage==item}" v-on:click="clickCurrent(item)">{{item}}</span>
		</div>
		<div class="DiReactPage-btn" v-on:click="clickNext" v-bind:class="{disable:currentpage==allpage}">下一頁</div>
		<div class="DiReactPage-btn" v-on:click="clickLast">最後一頁</div>
		<div class="DiReactPage-btn">總4頁</div>
		<input class="DiReactPage-input" type="text" />
		<button class="DiReactPage-btn">跳轉</button>
	</div>
</template>

<script>
export default {
  name: 'divuePage',
  computed:{
  	pages:function(){
		var arr=[];
		if(this.allpage>5){
			if(this.currentpage+5>this.allpage){
				for(var i=this.currentpage;i<=this.allpage;i++){
					arr.push(i);
				};
			}else{
				for(var i=this.currentpage;i<this.currentpage+5;i++){
					arr.push(i);
				};
			};
		}else{
			for(var i=1;i<=this.allpage;i++){
				arr.push(i);
			};
		}
		return arr;
	}
  },
  props:["currentpage","allpage"],
  methods:{
  	clickFirst:function(){//點擊第一頁	
		this.$emit("getajaxlist",1);
	},
	clickCurrent:function(item){
		this.$emit("getajaxlist",item);
	},
	clickLast:function(){//點擊最後一頁
		this.$emit("getajaxlist",this.allpage);
	},
	clickPrev:function(){//點擊上一頁
		if(this.currentpage-1<1){
			return false;
		}
		this.$emit("getajaxlist",this.currentpage-1);
	},
	clickNext:function(){//點擊下一頁
		if(this.currentpage+1>this.allpage){
			return false;
		}
		this.$emit("getajaxlist",this.currentpage+1);
	}
  }
}
</script>

<style>
	.DiReactPage{ height:30px; line-height:30px; text-align:center;}
	.DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
	.DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
	.DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
	.DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
	.DiReactPage .DiReactPage-page span.active{ color:#09F; }
	.DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

 

效果測試：

4.跳頁處理

這個我們獲取輸入框的值，直接調用，不過對輸入的內容必須有一些判斷限制：

加一個data:

使用位置：

5.顯示總頁數

這個是最簡單的：

 

六.分頁全部代碼和測試

divuePage.vue:

<template>
	<div class="DiReactPage">
		<div class="DiReactPage-btn" v-on:click="clickFirst">第一頁</div>
		<div class="DiReactPage-btn" v-on:click="clickPrev" v-bind:class="{disable:currentpage==1}">上一頁</div>
		<div class="DiReactPage-page">
			<span v-for="(item,index) in pages" v-bind:class="{active:currentpage==item}" v-on:click="clickCurrent(item)">{{item}}</span>
		</div>
		<div class="DiReactPage-btn" v-on:click="clickNext" v-bind:class="{disable:currentpage==allpage}">下一頁</div>
		<div class="DiReactPage-btn" v-on:click="clickLast">最後一頁</div>
		<div class="DiReactPage-btn">總{{allpage}}頁</div>
		<input class="DiReactPage-input" type="text" v-model="skipvalue" />
		<button class="DiReactPage-btn" v-on:click="clickSkip">跳轉</button>
	</div>
</template>

<script>
export default {
  name: 'divuePage',
  computed:{
  	pages:function(){
		var arr=[];
		if(this.allpage>5){
			if(this.currentpage+5>this.allpage){
				for(var i=this.currentpage;i<=this.allpage;i++){
					arr.push(i);
				};
			}else{
				for(var i=this.currentpage;i<this.currentpage+5;i++){
					arr.push(i);
				};
			};
		}else{
			for(var i=1;i<=this.allpage;i++){
				arr.push(i);
			};
		}
		return arr;
	}
  },
  data:function(){
  	return {
		skipvalue:""
	}
  },
  props:["currentpage","allpage"],
  methods:{
  	clickFirst:function(){//點擊第一頁	
		this.$emit("getajaxlist",1);
	},
	clickCurrent:function(item){
		this.$emit("getajaxlist",item);
	},
	clickLast:function(){//點擊最後一頁
		this.$emit("getajaxlist",this.allpage);
	},
	clickPrev:function(){//點擊上一頁
		if(this.currentpage-1<1){
			return false;
		}
		this.$emit("getajaxlist",this.currentpage-1);
	},
	clickNext:function(){//點擊下一頁
		if(this.currentpage+1>this.allpage){
			return false;
		}
		this.$emit("getajaxlist",this.currentpage+1);
	},
	clickSkip:function(){//點擊下一頁
		if(isNaN(this.skipvalue)){
			console.log("必須是數字")
			return false;
		}
		if(this.skipvalue<1 || this.skipvalue>this.allpage){
			console.log("超過範圍")
			return false;
		}
		this.$emit("getajaxlist",this.skipvalue);
	}
  }
}
</script>

<style>
	.DiReactPage{ height:30px; line-height:30px; text-align:center;}
	.DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
	.DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
	.DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
	.DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
	.DiReactPage .DiReactPage-page span.active{ color:#09F; }
	.DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

 

我們現在在pageHome.vue做了使用，這個模擬數據包含7頁，我們在另外兩個組件也使用分頁組件，測試小於5頁和只有1頁的效果：

<divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>

 

 

直接粘貼就可以在另外的組件使用。

只有1頁：

小於5頁：

測試沒有太大問題！

 

七.優化和改進建議

當然不是樣式的優化，這個需要設計的參與，我們還是顯示的優化和改進，比如：

我們是不是該有一個...

還有就是...

可以參考別的分頁效果，然後你可以不斷的改進！

 

八.完整代碼

 

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'

//註冊組件
import divuePage from './divuePage.vue'
Vue.component('divue-page', divuePage)
//路由配置

Vue.use(VueRouter); 

var routes = [
  { path: '/', component: pageHome},
  { path: '/pageNews', component: pageNews},
  { path: '/pageInfo', component: pageInfo}
]
var router = new VueRouter({
  routes: routes // （縮寫）相當於 routes: routes

})


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

 

App.vue:

<template>
  <div id="app">
  	<h3>{{msg}}</h3>
    <ul>
		<li><router-link to="/">pageHome</router-link></li>
		<li><router-link to="/pageNews">pageNews</router-link></li>
		<li><router-link to="/pageInfo">pageInfo</router-link></li>
	</ul>
	<div>
		<router-view></router-view>
	</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: '分頁組件：DiVuePage '
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

divuePage.vue:

<template>
	<div class="DiReactPage">
		<div class="DiReactPage-btn" v-on:click="clickFirst">第一頁</div>
		<div class="DiReactPage-btn" v-on:click="clickPrev" v-bind:class="{disable:currentpage==1}">上一頁</div>
		<div class="DiReactPage-page">
			<span v-for="(item,index) in pages" v-bind:class="{active:currentpage==item}" v-on:click="clickCurrent(item)">{{item}}</span>
		</div>
		<div class="DiReactPage-btn" v-on:click="clickNext" v-bind:class="{disable:currentpage==allpage}">下一頁</div>
		<div class="DiReactPage-btn" v-on:click="clickLast">最後一頁</div>
		<div class="DiReactPage-btn">總{{allpage}}頁</div>
		<input class="DiReactPage-input" type="text" v-model="skipvalue" />
		<button class="DiReactPage-btn" v-on:click="clickSkip">跳轉</button>
	</div>
</template>

<script>
export default {
  name: 'divuePage',
  computed:{
  	pages:function(){
		var arr=[];
		if(this.allpage>5){
			if(this.currentpage+5>this.allpage){
				for(var i=this.currentpage;i<=this.allpage;i++){
					arr.push(i);
				};
			}else{
				for(var i=this.currentpage;i<this.currentpage+5;i++){
					arr.push(i);
				};
			};
		}else{
			for(var i=1;i<=this.allpage;i++){
				arr.push(i);
			};
		}
		return arr;
	}
  },
  data:function(){
  	return {
		skipvalue:""
	}
  },
  props:["currentpage","allpage"],
  methods:{
  	clickFirst:function(){//點擊第一頁	
		this.$emit("getajaxlist",1);
	},
	clickCurrent:function(item){
		this.$emit("getajaxlist",item);
	},
	clickLast:function(){//點擊最後一頁
		this.$emit("getajaxlist",this.allpage);
	},
	clickPrev:function(){//點擊上一頁
		if(this.currentpage-1<1){
			return false;
		}
		this.$emit("getajaxlist",this.currentpage-1);
	},
	clickNext:function(){//點擊下一頁
		if(this.currentpage+1>this.allpage){
			return false;
		}
		this.$emit("getajaxlist",this.currentpage+1);
	},
	clickSkip:function(){//點擊下一頁
		if(isNaN(this.skipvalue)){
			console.log("必須是數字")
			return false;
		}
		if(this.skipvalue<1 || this.skipvalue>this.allpage){
			console.log("超過範圍")
			return false;
		}
		this.$emit("getajaxlist",this.skipvalue);
	}
  }
}
</script>

<style>
	.DiReactPage{ height:30px; line-height:30px; text-align:center;}
	.DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
	.DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
	.DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
	.DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
	.DiReactPage .DiReactPage-page span.active{ color:#09F; }
	.DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

 

pageHome.vue:

<template>
  <div class="page">
  		<p>//模擬ajax數據 1-7頁</p>
  		<ul class="ull">
			<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{item.text}}</span></li>
		</ul>
		<divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>
  </div>
</template>

<script>
export default {
  name: 'pageHome',
  data () {
    return {
	  currentpage:0,
      list: [],
	  allpage:"",
	  nextpage:false
    }
  },
  methods:{
  	getajaxlist:function(currentpage){
			var that=this;
		
			var list=[];
			var allpage="";
			var nextpage="";
			//模擬ajax數據 1-7頁
			setTimeout(function(){		
				if(currentpage==1){
					list=[
						{id:1,text:"111111"},
						{id:2,text:"222222"},
						{id:3,text:"3333333333"},
						{id:4,text:"44444444444"},
						{id:5,text:"555555555"},
					]
					allpage=7
					nextpage=true;
				}else if(currentpage==2){
					list=[
						{id:1,text:"66666666"},
						{id:2,text:"7777777777"},
						{id:3,text:"8888888888"},
						{id:4,text:"99999999999"},
						{id:5,text:"101010"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==3){
					list=[
						{id:1,text:"111111111111111"},
						{id:2,text:"121212"},
						{id:3,text:"131313"},
						{id:4,text:"141414"},
						{id:5,text:"15515"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==4){
					list=[
						{id:1,text:"161616"},
						{id:2,text:"171717"},
						{id:3,text:"181818"},
						{id:4,text:"191919"},
						{id:5,text:"202020"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==5){
					list=[
						{id:1,text:"2121"},
						{id:2,text:"22222"},
						{id:3,text:"232323"},
						{id:4,text:"242424"},
						{id:5,text:"252525"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==6){
					list=[
						{id:1,text:"2626"},
						{id:2,text:"2727"},
						{id:3,text:"2828"},
						{id:4,text:"2929"},
						{id:5,text:"3030"},
					]
					allpage=7
					nextpage=true;				
				}else if(currentpage==7){
					list=[
						{id:1,text:"3131"},
						{id:2,text:"3232"}
					]
					allpage=7
					nextpage=false;				
				};
			
				that.currentpage=currentpage;
				that.list=list;
				that.allpage=allpage;
				that.nextpage=nextpage;
				  
				  
			},200);		
	}
  },
  created:function(){
  		//模擬生成第一頁數據
  		this.getajaxlist(1);
  }
}
</script>

<style>
	ul{ list-style:none;}
	ull{ margin:100px auto; width:1000px;line-height:30px;}
	li{height:30px;}
	.l{float:left;width:300px;}
	.r{float:left;width:600px;}
</style>

 

pageInfo.vue:

<template>
  <div class="page">
  		<p>//模擬ajax數據 1-3頁</p>
  		<ul class="ull">
			<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{item.text}}</span></li>
		</ul>
		<divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>
  </div>
</template>

<script>
export default {
  name: 'pageInfo',
  data () {
    return {
	  currentpage:0,
      list: [],
	  allpage:"",
	  nextpage:false
    }
  },
  methods:{
  	getajaxlist:function(currentpage){
			var that=this;
		
			var list=[];
			var allpage="";
			var nextpage="";
			//模擬ajax數據 1-3頁
			setTimeout(function(){		
				if(currentpage==1){
					list=[
						{id:1,text:"111111"},
						{id:2,text:"222222"},
						{id:3,text:"3333333333"},
						{id:4,text:"44444444444"},
						{id:5,text:"555555555"},
					]
					allpage=3
					nextpage=true;
				}else if(currentpage==2){
					list=[
						{id:1,text:"66666666"},
						{id:2,text:"7777777777"},
						{id:3,text:"8888888888"},
						{id:4,text:"99999999999"},
						{id:5,text:"101010"},
					]
					allpage=3
					nextpage=true;				
				}else if(currentpage==3){
					list=[
						{id:1,text:"111111111111111"},
						{id:2,text:"121212"},
						{id:3,text:"131313"},
						{id:4,text:"141414"},
						{id:5,text:"15515"},
					]
					allpage=3
					nextpage=false;				
				}
			
				that.currentpage=currentpage;
				that.list=list;
				that.allpage=allpage;
				that.nextpage=nextpage;
				  
				  
			},200);		
	}
  },
  created:function(){
  		//模擬生成第一頁數據
  		this.getajaxlist(1);
  }
}
</script>

<style>
	ul{ list-style:none;}
	ull{ margin:100px auto; width:1000px;line-height:30px;}
	li{height:30px;}
	.l{float:left;width:300px;}
	.r{float:left;width:600px;}
</style>

 

pageNews.vue:

<template>
  <div class="page">
  		<p>模擬ajax數據 1頁</p>
  		<ul class="ull">
			<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{item.text}}</span></li>
		</ul>
		<divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>
  </div>
</template>

<script>
export default {
  name: 'pageNews',
  data () {
    return {
	  currentpage:0,
      list: [],
	  allpage:"",
	  nextpage:false
    }
  },
  methods:{
  	getajaxlist:function(currentpage){
			var that=this;
		
			var list=[];
			var allpage="";
			var nextpage="";
			//模擬ajax數據 1頁
			setTimeout(function(){		
				if(currentpage==1){
					list=[
						{id:1,text:"111111"},
						{id:2,text:"222222"},
						{id:3,text:"3333333333"}
					]
					allpage=1
					nextpage=false;
				}
			
				that.currentpage=currentpage;
				that.list=list;
				that.allpage=allpage;
				that.nextpage=nextpage;
				  
				  
			},200);		
	}
  },
  created:function(){
  		//模擬生成第一頁數據
  		this.getajaxlist(1);
  }
}
</script>

<style>
	ul{ list-style:none;}
	ull{ margin:100px auto; width:1000px;line-height:30px;}
	li{height:30px;}
	.l{float:left;width:300px;}
	.r{float:left;width:600px;}
</style>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 什麼是ObjCTypes?
    先看一下消息轉發流程: 在forwardInvocation這一步，你必須要實現一個方法: 該方法用於說明消息的返回值和參數類型。NSMethodSignature是方法簽名，它是用來記錄返回值和參數類型的一個對象。看一下與該類相關的方法： 2和3兩個方法是根據SEL來構造NSMethodSigna ...
  • 網路載入空頁面
    空頁面的顯示很常用，所以自己做了一個通用的空頁面顯示，先看效果圖 在有網路的時候正常載入顯示，在沒有網路的時候自動載入空頁面，點擊空頁面重新載入網路請求的一個功能 1：定義一個xml頁面，頁面佈局是一個iamgeview和一個textview的顯示 2：添加輔助類，控制載入空頁面和顯示隱藏等邏輯 3 ...
  • 漫話JavaScript與非同步·第三話——Generator：化非同步為同步
    ES6新增的特性中，Generator無疑是最為強大者之一，它與Promise結合起來，為令前端頭疼的非同步回調難題提供了終極解決方案！ ...
  • for迴圈案例
    for迴圈案例 今天給大家介紹點for迴圈的案例 1.大馬馱2石糧食，中馬馱1石糧食，兩頭小馬馱一石糧食，要用100匹馬，馱100石糧食，該如何調配？ 2.某偵察隊接到一項緊急任務，要求在A、B、C、D、E、F六個隊員中儘可能多地挑若幹人，但有以下限制條件： ●A和B兩人中至少去一人； ●A和D不能 ...
  • javascript中的深拷貝和淺拷貝
    有時候我們需要拿到對象和數組進行操作卻避免其受影響，就需要拷貝一份新的出來。 對於字元串的拷貝是對其值進行複製： 對對象的拷貝： 圖中是我的理解，Object.assign()只實現了一級克隆，當然對於沒有嵌套的對象可以直接用，可是對於多層嵌套的對象，也想對其子對象進行克隆這種方法就不行了。 通常對 ...
  • javascript 之作用域鏈-10
    前言 在《執行環境》文中說到，當JavaScript代碼執行一段可執行代碼時，會創建對應的執行上下文(execution context)。 變數對象(Variable object，VO) 作用域鏈(Scope chain) this 詞法作用域 在《作用域》中說到JavaScript採用詞法作用 ...
  • 分享實用的JavaScript代碼庫
    調用： $.getCookie('name'); ...
  • vue 在nginx下頁面刷新出現404問題解決和在nginx下頁面載入了js但是頁面顯示空白問題解決
    一、vue 在nginx下頁面刷新出現404 在網上翻遍了所有這樣問題的解決辦法，全都是一個解決辦法也是正確的解決辦法，（後來在vue官網上關於history方式出現404解決方法也是這樣說的），只是沒有表達完整，可能會讓比較急於解決這個問題的人簡單複製卻始終解決不了問題 nginx正確的配置： 1 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類