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 相关文章推荐
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
vue过渡和animate.css结合使用详解
Jun 14 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
详解vuex状态管理模式
Nov 01 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
如何用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数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
用php实现选择排序的解决方法
2013/05/04 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
js登录弹出层特效
2014/03/07 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
python数组过滤实现方法
2015/07/27 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
python的列表List求均值和中位数实例
2020/03/03 Python
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
技术总监的工作职责
2013/11/13 职场文书
病媒生物防治方案
2014/05/13 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
安全承诺书
2015/01/19 职场文书
小学中队委竞选稿
2015/11/20 职场文书
详解Python内置模块Collections
2022/03/22 Python
Android studio 简单计算器的编写
2022/05/20 Java/Android