vue实现分页组件


Posted in Javascript onJune 16, 2020

本文实例为大家分享了vue实现分页组件的具体代码,供大家参考,具体内容如下

<template>
 <div class="pageBox">
 <ul>
  <li v-if="this.condition.pageNo > 1 && this.pages.length > 4" class="sides"><a @click="prePage()"><s class="font_main"></s></a></li>
  <li v-for="(item, index) in pages" :class="{'curtPage': condition.pageNo == item}">
  <a v-if="item" @click="goPage(item)" >
   <s>{{item}}</s>
  </a>
  <a href="javascript:;" rel="external nofollow" v-else>...</a>
  </li>
  <li class="sides" v-if="condition.pageNo < pageCount && this.pageCount > 4"><a @click="nextPage()"><s class="font_main"></s></a></li>
 </ul>
 </div>
</template>

js中代码 page 和condition是由父组件中传过来的参数

<script>
 export default {
 props: {
  page: Object,
  condition: Object
 },
 data () {
  return {
  pageSize: this.condition.pageSize
  }
 },
 computed: {
  pageCount: function () {
  return this.page.totalCount / this.condition.pageSize > 0 ? this.page.totalCount % this.condition.pageSize === 0 ? this.page.totalCount / this.condition.pageSize : Math.ceil(this.page.totalCount / this.condition.pageSize) : 1
  },
  pages () {
  let c = this.condition.pageNo
  let t = this.pageCount
  let arr = []
  if (t === 1) {
   return arr
  }
  if (t <= 4) {
   for (let i = 1; i <= t; i++) {
   arr.push(i)
   }
   return arr
  }
  if (c <= 3) return [1, 2, 3, 0, t]
  if (c >= t - 1) return [1, 0, t - 2, t - 1, t]
//  if (c === 4) return [1, 2, 3, 4, 5, 0, t]
//  if (c === (t - 2)) return [1, 0, t - 3, t - 2, t - 1, t]
  return [1, 0, c - 1, c, c + 1, 0, t]
  }
 },
 methods: {
  goPage (indexPage) {
  if (this.indexPage !== this.condition.pageNo) {
   this.condition.pageNo = indexPage
   this.$emit('search')
  }
  },
  prePage () {
  if (this.condition.pageNo !== 1) {
   this.condition.pageNo--
   this.goPage(this.condition.pageNo)
  }
  },
  nextPage () {
  if (this.condition.pageNo !== this.pageCount) {
   this.condition.pageNo++
   this.goPage(this.condition.pageNo)
  }
  }
 }
 }
</script>

效果图:

vue实现分页组件

vue实现分页组件

vue实现分页组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
如何用RxJS实现Redux Form
Dec 29 #Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 #Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 #jQuery
javascript实现计算指定范围内的质数示例
Dec 29 #Javascript
基于vue.js组件实现分页效果
Dec 29 #Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 #Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 #jQuery
You might like
PHP 常见郁闷问题答解
2006/11/25 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
详解Python3.1版本带来的核心变化
2015/04/07 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Python sublime安装及配置过程详解
2020/06/29 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
交通事故协议书范文
2014/04/16 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
预备党员入党感言
2015/08/01 职场文书