vue前端动态分页模板(记录)

分页用的太多了，写一个模板

功能：

可以自定义分页条长度(奇数，默认5)，可以自定义一页数据的数量(默认15)
分页条长度为自定义分页条长度，并且分页栏的页码可以在点击时变换，保持当前页码居中(比如分页条长度为5，总页数有10页，当前页码为1，2时，如果已经到最前方或最后方，不能变换，同理后两个9，10也不能变换，点击的页码为6时，因为分页条长度为5，所以显示的应该是45678)，
当前页码高亮
每次点击分页栏后都会调用一个方法传入点击的页码，你可以在这个函数里发送ajax请求修改页面数据

效果：

总页码为7

初始

点击4后

点击5后

点击7后

点击左按钮后

再次点击左按钮后

再次点击左按钮后

点击2后

点击左按钮后

怎样使用

手动指定每页大小pageSize，和分页栏长度cutBarLength
在setTotalPage函数的内部，想办法赋值给totalPage一个总页数，你可以用ajax请求数据库返回总页数赋值给this.totalPage，毕竟我必须知道你的总页数，才能自动构造分页条,所以这一项必须做
随后在 doPageCutSearch(pageNum)这个方法内写一些你想干的事情就完了，每次点击分页栏后都会调用这个方法传入点击的页码，你可以在这个函数里发送ajax修改页面数据

代码实例

方法：

属性：

代码：

<template id="hotMessageList"><ul class="pagination"><li><a href="#" aria-label="Previous" @click.prevent="dealLeftRightBar('left')"><span aria-hidden="false">&laquo;</span></a></li><li v-for="(item,index) in dataCutBar" ><a @click.prevent="dealCutPageMessage(item)" :class="{cutBarDisplay:item==activePage}">{{item}}</a></li><li><a href="#" aria-label="Next" @click.prevent="dealLeftRightBar('right')"><span aria-hidden="true">&raquo;</span></a></li></ul>
</template>
const hotMessageList = {template:"#hotMessageList",data:function(){return {//分页定制信息(需要初始改变)cutBarLength:5,//分页条长度，一定要设置成奇数pageSize:3,//分页每页大小//分页数据(不可修改)dataCutBar:[],doNotMoveCount:[],totalPage:1,activePage:1,firstClickDex:true}},methods:{//页面开始时加载做的初始化任务，光用的不用看initCutPageData(){//初始化设置分页条[1，2，3，4，5。。。]for(let i=0;i<this.cutBarLength;i++){this.dataCutBar.push(i+1)}this.setTotalPage();},//设置初始化页码，此方法会在页面初始化时调用setTotalPage(){//这里需要给 this.totalPage 赋值//下面是举例//去服务器看下有多少条数据并赋值axios.get("http://localhost:8080/test/getHotMessagePageCutTotalCount?"+"pageSize="+this.pageSize,{}).then(resp=>{this.totalPage=resp.data.totalPage}).catch(error=>{}) },//初始化不动函数 ，光用的不用看initDotMoveData(){if(this.firstClickDex){//初始化不要移动的页码for(let i=0;i<(this.cutBarLength-1)/2;i++){console.log(this.totalPage)this.doNotMoveCount.push(i+1)this.doNotMoveCount.push(this.totalPage-i)}this.firstClickDex=false}},//当分页条中间信息被点击时触发此函数，光用的不用看dealCutPageMessage(pageNum){//初始化不动数函数this.initDotMoveData();//如果是当前页则不做处理if(pageNum==this.activePage){return;}let ifMove=true;//判断是否需要改变分页数组，说白了就是看你按下的页码是不是不动数组里面的for(let i = 0 ;i<this.doNotMoveCount.length;i++){if(pageNum==this.doNotMoveCount[i]){ifMove=false;break;}}//需要动就动一下if(ifMove==true){//改变次数let count = (this.cutBarLength-1)/2;//创建新数组let newDataCutBar = [];//下面三个是往新数组里添加for(let i=count;i>0;i--){newDataCutBar.push(pageNum-i)}newDataCutBar.push(pageNum);for(let i=0;i<count;i++){newDataCutBar.push(pageNum+i+1)}//将新数组赋值this.dataCutBar=newDataCutBar}else{//这里是不需要改变，但是还有一种情况2，3，4，5，6 ；2是不动数组，但点击2应该让数组往前移一位//判断是否已经接近临界了，也就是说判断是否我们的框还有没矿住的数据，if(pageNum<this.dataCutBar[(this.cutBarLength-1)/2]){//判断是否前方有值if(this.dataCutBar[0]!=1){//往前方推进1格let newDataCutBar = [];for(let i=0;i<this.dataCutBar.length;i++){newDataCutBar[i]=this.dataCutBar[i]-1}this.dataCutBar=newDataCutBar}}else if(pageNum>this.dataCutBar[(this.cutBarLength-1)/2]){//判断是否后方有值if(this.dataCutBar[this.dataCutBar.length-1]!=this.totalPage){//往后方推进1格let newDataCutBar = [];for(let i=0;i<this.dataCutBar.length;i++){newDataCutBar[i]=this.dataCutBar[i]+1}this.dataCutBar=newDataCutBar}}}this.activePage=pageNum//调用数据库this.doPageCutSearch(this.activePage);},//当左右按钮被按下时，光用的不用看dealLeftRightBar(dex){//初始化不动数函数this.initDotMoveData();if(dex=='right'){//判断是否后方有值if(this.dataCutBar[this.dataCutBar.length-1]!=this.totalPage){//可以往后动，但是先判断下当前的数是否是不动数，如果是，则光移动下当前页数就可以for(let i = 0 ;i<this.doNotMoveCount.length;i++){if(this.activePage==this.doNotMoveCount[i]){this.activePage=this.activePage+1this.doPageCutSearch(this.activePage);return;}}//往后方推进1格let newDataCutBar = [];for(let i=0;i<this.dataCutBar.length;i++){newDataCutBar[i]=this.dataCutBar[i]+1}this.dataCutBar=newDataCutBar//将现在的角标移动this.activePage=this.activePage+1}else{//后方没值，但是判断下active是否已经到达了最后if(this.activePage!=this.totalPage){this.activePage=this.activePage+1}}}else{//前方的值不是1，说明前面还有东西没显示if(this.dataCutBar[0]!=1){//可以往前动，但是先判断下当前的数是否是不动数，如果是，则光移动下当前页数就可以for(let i = 0 ;i<this.doNotMoveCount.length;i++){if(this.activePage==this.doNotMoveCount[i]){this.activePage=this.activePage-1this.doPageCutSearch(this.activePage);return;}}//往前方推进1格let newDataCutBar = [];for(let i=0;i<this.dataCutBar.length;i++){newDataCutBar[i]=this.dataCutBar[i]-1}this.dataCutBar=newDataCutBar//将现在的角标移动this.activePage=this.activePage-1}else{//前方没值，但是判断下active是否已经到达了最前面if(this.activePage!=1){this.activePage=this.activePage-1}}}this.doPageCutSearch(this.activePage);},//每次点击分页栏时会调用此方法(你可以去数据库查消息)doPageCutSearch(pageNum){this.getCutPageData();}},mounted(){//分页条初始化this.initCutPageData();}}

vue前端动态分页模板(记录)相关推荐

若依 vue前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起
前言因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段.要麻烦你们自己手敲了. 先来看看效果: 场景:在费用配置列表中,点击每一项的配置,都会在 ...
VUE 前端PDF分页预览、下载
一.安装PDF插件依赖 // pdf预览 npm install vue-pdf --save// pdf下载 npm install downloadjs 二.完整示例 <template&g ...
动态添加组件_使用vue.js的动态组件模板
最近刚做完建站工具,准备总结里面使用到的一些技巧,同时会做一版简化的放在 github上. 先来一篇翻译的文章,和我在项目中使用的动态组件思路一样,不过缺少了演化的过程,直接给出了最终的解决方案.这篇 ...
ant design Vue 纯前端实现分页
ant design Vue 纯前端实现分页功能 (有选择的话最好让后端分页,前端分页可能会有问题,为了性能,尽量不要前端分页) 自己想的一个简单方法: 通过页码改变事件,每页数据个数改变事件,获取改 ...
【项目经验】Vscode添加vue前端注释模板
[背景] 最近小编在工作中接手的新项目前端部分,也需要给原来的代码补注释,为了能够更加高效的写注释,所以在Vscode里配置了模板.个人感觉使用感觉不错,所以将过程记录下来分享给大家.(并非权威 ...
vue 修改模板{{}}标签_详解Vue 动态添加模板的几种方法
以下方法只适用于 Vue1.0 版本,推荐系数由高到低排列. 通常我们会在组件里的 template 属性定义模板,或者是在*.vue文件里的 template 标签里写模板.但是有时候会需要动态生成 ...
vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
(vue) 前端实现下载本地Excel模板
(vue) 前端实现下载本地Excel模板方法: 第一步: 将文件放在public里第二步: href链接解决参考:https://blog.csdn.net/sincejuly1995/art ...
Element ui+vue前端框架组件主题美化后台管理系统模板html
最新设计了一套Element ui主题模板演示地址:Element ui+vue前端框架组件主题美化后台管理系统模板 Element ui版本号:2.15.12 vue版本号:2.7. ...

vue前端动态分页模板(记录)

功能：

效果：

怎样使用

代码实例

vue前端动态分页模板(记录)相关推荐

最新文章

热门文章