效果展示

HTML

<div class="page_bar no-select"><ul class="clearfix"><li class="iconfont":class="{vh : currentPage === 1}"@click="subCurrentPage"></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"></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()},

Vue分页页码栏设计相关推荐

vue中elementUi筛选后分页页码恢复到第一页
分页查询的时候,在第4页添加筛选条件查询后.返回了新数据,展示的是第一页数据但分页页码还是第四页.正确应为第1页解决思路:条件筛选后将当前currentPage改为1 1.实现代码 <temp ...
项目总结-vue分页组件集成
项目总结-vue分页组件集成后台管理的大部分页面都需要对数据进行分页显示,但是在每个页面都写分页代码太过冗余,而且当分页出现问题时,需要修改每个页面,所以我集成了一个分页组件,在每个页面直接引用这个 ...
9.后台管理系统主页面布局以及左侧导航栏设计
9.后台管理系统主页面布局以及左侧导航栏设计 1.首页布局步骤: 在views目录下新建Main.vue文件,作为登录之后的布局参考:element-ui 使用此模块的目的是,当中间内容部分有超出 ...
layui分页页码消失
layui分页传值到后台,下方分页栏消失通过layui的分页完成后,想要再完成搜索的分页,但是在向后台传递页码时附带搜索框内容,会发现分页下方页面消失了.后来才发现是搜索框内的值获取问题. 后台代码 ...
HTML简单页面页码的设计
HTML简单页面页码的设计 <!DOCTYPE HTML> <html> <head><title>HTML页码设置</title>< ...
前端分页页码静态部分制作
效果: 代码: <!DOCTYPE html> <html><head><meta charset="UTF-8"><titl ...
鸿蒙系统平板界面,鸿蒙OS平板UI界面曝光：双Dock栏设计+超级终端互联功能
原标题:鸿蒙OS平板UI界面曝光:双Dock栏设计+超级终端互联功能前不久华为官宣表示,将会在2021年4月24日-26日,在深圳大学城召开华为开发者大会2021(HDC.Cloud 2021),据 ...
vue分页+spring boot +分页插件pagehelper
vue分页+spring boot +分页插件pagehelper https://blog.csdn.net/baidu_38603246/article/details/98854013
vue底部跳转_详解Vue底部导航栏组件
不多说直接上代码 BottomNav.vue: {{item.name}} export default{ props:['idx'], data(){ return { items:[{ cls:& ...

Vue分页页码栏设计

Vue分页页码栏设计

效果展示

HTML

数据需要

函数需要

运用

Vue分页页码栏设计相关推荐

最新文章

热门文章