效果展示

在这里插入图片描述

HTML

<div class="page_bar no-select"><ul class="clearfix"><li class="iconfont":class="{vh : currentPage === 1}"@click="subCurrentPage">&#xe660;</li><li :class="{vh : currentPage <= showPageNumCeil}">...</li><li v-for="item in showPageBarList":key="item.id":class="{current : item.id===currentPage}"@click="getCurrentPageNum(item.id)">{{item.id}}</li><li :class="{vh : currentPage >= pageNum - (showPageNum - showPageNumCeil)}">...</li><li class="iconfont":class="{vh : currentPage === pageNum}"@click="addCurrentPage">&#xe65f;</li></ul><input type="text"ref="ipt"v-model="iptValue">/{{pageNum}}<button @click="getInputCurrentPage()">跳转</button>
</div>

数据需要

data () {return {// 总的数据dataList: [],// 数据分组totalPage: [],// 当前显示的数据dataShow: [],// 每页显示数量pageSize: 3,// 总页数pageNum: 1,// 当前页，默认第一页currentPage: 1,// 页码列表pageBarList: [],// 显示出来的页码数showPageNum: 5,// 显示页码中间值showPageNumCeil: 0,// 当前显示的页码列表showPageBarList: [],// 输入页码iptValue: ''};
},

函数需要

methods: {// 分页初始化pageInit () {// 计算总页数this.pageNum = Math.ceil(this.dataList.length / this.pageSize) || 1// 数据分组this.getTotalPage()// 获取当前显示的数据this.getDataShow()// 生成页码列表this.getpageBarList()// 获取显示页码中间值this.getShowPageNumCeil()// 获取显示出来的页码列表this.getShowPageBarList()},// 获取总页数getPageNum () {this.pageNum = Math.ceil(this.dataList.length / this.pageSize) || 1},// 获取分组数据getTotalPage () {for (let i = 0; i < this.pageNum; i++) {this.totalPage[i] = this.dataList.slice(this.pageSize * i, this.pageSize * (i + 1))}},// 获取当前显示的数据getDataShow () {this.dataShow = this.totalPage[this.currentPage - 1]},// 获取页码列表getpageBarList () {for (var i = 1; i <= this.pageNum; i++) {var obj = {id: i,state: false}this.pageBarList[this.pageBarList.length] = obj}},//  获取显示页码中间值getShowPageNumCeil () {this.showPageNumCeil = Math.ceil(this.showPageNum / 2)},// 获取当前显示的页码列表getShowPageBarList () {if (this.currentPage <= this.showPageNumCeil) {// 前项列表this.showPageBarList = this.pageBarList.slice(0, this.showPageNum)} else if (this.currentPage >= this.pageNum - (this.showPageNum - this.showPageNumCeil)) {// 后项列表this.showPageBarList = this.pageBarList.slice(this.pageNum - this.showPageNum, this.pageNum)} else {// 其他this.showPageBarList = this.pageBarList.slice(this.currentPage - this.showPageNumCeil, this.currentPage + this.showPageNum - this.showPageNumCeil)}},// 点击跳转页码getCurrentPageNum (num) {this.currentPage = num},// 后退一页subCurrentPage () {this.currentPage--},// 前进一页addCurrentPage () {this.currentPage++},// 获取输入的页码getInputCurrentPage () {// 输入有误处理if (1 <= this.iptValue && this.iptValue <= this.pageNum) {this.currentPage = Number(this.iptValue)this.iptValue = ''} else {alert('请输入正确的页码')this.iptValue = ''}}},

运用

  watch: {//当前页变化时，重新获取显示的数据和显示的页码currentPage: {handler () {this.getDataShow()this.getShowPageBarList()},immediate: true,}},created () {this.pageInit()},