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>