Vue中实现分页

1.构造分页组件，并注册为全局组件

<template><div class="pagination"><button v-if="startNumAndEndNum.start>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><!-- 中间部分 --><template  v-for="(page,index) in startNumAndEndNum.end"><button:key="index" v-if="startNumAndEndNum.start<=page"@click="$emit('getPageNo',page)":class="{active:pageNo==page}"> {{page}}</button></template>  <button v-if="startNumAndEndNum.end<allPage-1">···</button><button v-if="startNumAndEndNum.end<allPage" @click="$emit('getPageNo',allPage)" :class="{active:pageNo==allPage}">{{allPage}}</button><button v-if="startNumAndEndNum.end!=allPage" @click="$emit('getPageNo',pageNo+1)">下一页</button><button style="margin-left: 30px">共 {{total}} 条</button></div></template><script>export default {name: "Page",props:['pageNo','pageSize','total','continues'],computed:{//计算总页数allPage(){//向上取整return Math.ceil(this.total / this.pageSize)},//计算 连续页码 起始数据和结束数据[连续页码至少是5]startNumAndEndNum(){//先定义两个变量存储开始与结束的数字let start=0,end=0;//如果数据不够5页(不正常现象)if(this.allPage<this.continues){start=1,end=this.allPage}else{start=this.pageNo - parseInt(this.continues/2),end=this.pageNo + parseInt(this.continues/2)//当当前页为1时 start为-1 if(start<1){start=1,end=this.continues}//纠正end if(end>this.allPage){end=this.allPage,start=end-this.continues + 1}}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;}}//   button:active {//     color: rgba(235, 217, 55, 0.935);//     border: 1px solid orange;// }.active{background-color: skyblue;}}</style>

2.使用分页组件

<template><div><!-- 分页组件 --><Page :pageNo="params.pageNo" :pageSize="params.pageSize" :total="total" :continues="5"ref="pg"></Page></div>
</template><script>
import {mapState} from "vuex";
export default {name: "Search",data() {return {params: {//分页器参数pageNo: 1,pageSize: 10,},};},mounted() {this.$refs.pg.$on('getPageNo',(pageNo)=>{this.params.pageNo=pageNothis.getSearch(this.params)})},computed: {//获取search模块展示的总数据条数...mapState({total:state=>state.search.searchList.total})},methods: {//向服务器发请求获取search模块数据，根据参数不同返回不同的数据//把这次请求封装成函数，需要时候调用即可getSearch(params) {this.$store.dispatch("SearchInfo", params);},
};
</script><style lang="less" scoped>
</style>