vue实现分页器进行数据交互
子组件
<template> <div class="pagination"> <button :disabled="pageNo==1" @click="$emit('getPageNo',pageNo-1)">上一页</button> <button v-if="startNumAndEndNum.start > 1" @click="$emit('getPageNo',1)" :class="{active:pageNo==1}">1</button> <button v-if="startNumAndEndNum.start > 2">···</button> <!-- 中间部分 --> <button @click="$emit('getPageNo',page)" v-for="(page,index) in startNumAndEndNum.end" :key="index" v-if="page>=startNumAndEndNum.start" :class="{active:pageNo==page}">{{page}}</button> <button v-if="startNumAndEndNum.end < totalPage-1">···</button> <button @click="$emit('getPageNo',totalPage)" v-if="startNumAndEndNum.end < totalPage" :class="{active:pageNo==totalPage}">{{ totalPage }}</button> <button @click="$emit('getPageNo',pageNo+1)" :disabled="pageNo==totalPage">下一页</button> <button style="margin-left: 30px">共{{ total }} 条</button> </div> </template> <script> export default { name: "Pagination", props: ["pageNo", "pageSize", "total", "continues"],// 当前页数,,每页展示的数据,总数据 ,连续的数字 computed: { //计算有多少页 totalPage() { return Math.ceil(this.total / this.pageSize); }, //计算出连续的页码的起始数字和结束数据数字,连续页码数字,至少是5 startNumAndEndNum() { const { continues, pageNo, totalPage } = this; //先定义两个变量储存起始数字和结束数字 //注意开始页不会是0,定义的时候可以为0 let start = 0; let end = 0; // 连续页码的数字是5,至少为5页,如果不够5页,做出判断 //总页面不足5页,没有页码多 if (continues > totalPage) { start = 1; end = totalPage; } else { //总页数大于5,活数据,如果连续页为5就减去2,如果连续页是7,就减去3 // 起始数据 start = pageNo - parseInt(continues / 2); //结束数据 end = pageNo + parseInt(continues / 2); //start出现了0或者负数,进行纠正 if (start < 1) { start = 1; end = continues } //end大于总页数,进行纠正 if(end > totalPage) { start = totalPage-continues+1; end = totalPage; } } return { start, end }; }, }, }; </script> <style lang="less" scoped> .pagination { text-align: center; button { margin: 0 5px; background-color: #f4f4f5; color: #606266; outline: none; border-radius: 2px; padding: 0 4px; vertical-align: top; display: inline-block; font-size: 13px; min-width: 35.5px; height: 28px; line-height: 28px; cursor: pointer; box-sizing: border-box; text-align: center; border: 0; &[disabled] { color: #c0c4cc; cursor: not-allowed; } &.active { cursor: not-allowed; background-color: #409eff; color: #fff; } &:hover { color: #409eff; } } } </style>
父组件给子组件传递数据(模拟数据)
<Pagination :pageNo="searchParams.pageNo" :pageSize="searchParams.pageSize" :total="91" :continues="5" @getPageNo="getPageNo" ></Pagination>
父组件在想请求数据时候的一些信息
data() { return { //带给服务器的参数 searchParams: { pageNo:1, //默认在第几页 pageSize: 3, //每页几条数据 }, }; },
通过自定义事件,整理传递的参数,然后再请求数据
//获取当前第几页 getPageNo(pageNo){ // console.log(pageNo) //整理给服务器的参数 this.searchParams.pageNo=pageNo; this.getData() },