众所周知的是，所有的后台管理系统都离不开分页，而传统的分页实现，更多的是同后端的进行交互，传递页码并返回当前页所包含的数据，最终进行展示。这种做法存在的弊端就是用户在进行页码切换的时候，后耗费大量的时间，同样也会增加后端工程师的压力，这一次我们通过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，哈哈。