衆所周知的是，所有的後臺管理系統都離不開分頁，而傳統的分頁實現，更多的是同後端的進行交互，傳遞頁碼並返回當前頁所包含的數據，最終進行展示。這種做法存在的弊端就是用戶在進行頁碼切換的時候，後耗費大量的時間，同樣也會增加後端工程師的壓力，這一次我們通過vue實現分頁功能。
首先是數據問題，在node裏直接查詢所有的用戶返回給前臺。
// 獲取全部用戶信息
router.get('/userList',(req,res)=>{
DB.find('user', {},(err, users)=>{
if(err){
res.send({
code : 0 ,
msg : '查詢失敗'
});
return
}
res.send({
code:1,
users:users
});
});
});
在store的action裏定義了相關的獲取。
async getUsers({commit}){
const result = await reqUsers();
if(result.code === 1){
const users = result.users;
commit(RECEIVE_USER,{users})
}
},
在mutation裏進行了數據的更新。
[RECEIVE_USER](state,{users}){
state.users = users
},
就這樣直接把所有用戶的信息放在了vuex裏進行了管理
然後就是基本的HTML部分的內容了，大概說一下：判斷用戶的數量大於8的時候再顯示分頁的內容，在select裏遍歷每頁多少條數據的數組，用於調整每頁顯示數據條數，封裝跳轉頁碼的函數chengPages（），最後是一個找轉到指定頁碼的按鈕。大概的代碼如下。
<div class="page" v-if="users.length>8"><!--頁面分頁-->
<ul>
<li style="padding: 0">
<label>
<select class="selectPage" v-model="pageSize">
<option v-for="(pageData,index) in pageDataList" :value="pageData" :key="index">每頁{{pageData}}條</option>
</select>
</label>
</li>
<li @click="chengPages(1)">首頁</li>
<li v-for="i in pages" :key="i" @click="chengPages(i)" :class="{'on': pageNum ===i }" v-if="i-pageNum>-3 && i-pageNum<3">{{ i }}</li>
<li @click="chengPages(pages)">尾頁</li>
<li><input class="choisePage" type="text" v-model="choise" @keyup.enter="chengPages(choise)"><span @click="chengPages(choise)">跳轉</span></li>
</ul>
</div>
整體的樣式如下，具體的css就不進行展示了 。
下面說一下頁面用到的東西：當前所在頁的頁碼數，默認爲1，每頁顯示的數據條數，我的默認值爲8，跳轉頁碼輸入值，默認爲空字符串，每頁顯示多少條數據的數組，一定要包含默認值，即pageSize。
data(){
return{
pageNum : 1, //當前頁數
pageSize : 8, //每頁多少條數據
choise:'',//跳轉頁數
pageDataList:[2,4,8,10,15,20,30,50,100],//每頁數據量數組
}
}
下面就是相關的函數封裝了,它的主要功能就是控制顯示的頁碼，其中要加上相關的判斷，判斷是否小於1或大於總頁數，小於1的情況下調到第一頁，大於最大頁的情況下，調到最後一頁。
chengPages(number){ // 定義一個頁數跳轉函數
number = number*1;
if(number<=0){
number = 1;
this.choise = 1;
}
if(number>this.pages){
number = this.pages;
this.choise = this.pages;
}
this.pageNum = number
}
用的多的當屬計算屬性了，第一個在引入mapState的情況下，直接拿得到所有用戶的數據，接下來就是通過總用戶數，每頁顯示數據條數，計算出總頁數了，最後向上取整返回。重頭戲就是通過上面所提到的數據，生成一個包含當前頁數據的數組進行返回，最後在頁面上進行遍歷。
...mapState(['users']), //拿到所有的用戶數據
pages(){ //計算總共總共多少頁
let number = 0;
const allUser = this.users;
const pageSize = this.pageSize;
number = allUser.length/pageSize;
return Math.ceil(number);
},
pageData(){ //當前頁顯示的數據
let users = [];
const pageNum = this.pageNum; //當前頁數
const allUser = this.users; //所有用戶
const pageSize = this.pageSize; //每頁多少條數據
allUser.forEach((node,index)=>{
if( index >= pageSize*(pageNum-1) && index < pageSize*pageNum){
users.push(node)
}
});
return users
},
其實到這裏已經差不多了，但是當每頁數據量少時，可以改變一個相對大一點的頁碼數，當再次調整每頁數據條數的時候，當前頁不會改變，計算出當前頁的數據爲空，爲了避免這種情況的發生，需要對當前頁數據進行監聽，當pageData的長度爲零時，直接跳轉到第一頁，避免問題發生。
watch: {
pageData(value) { //監聽當前頁數據，數據沒有時跳轉第一頁
if(value.length===0){
this.pageNum = 1
}
}
}
這樣在進行頁面的跳轉的時候，就不會出現問題了。
最後想要完整代碼的，歡迎訪問我的GitHub，最好來個Star，哈哈。