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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
实例讲解vue源码架构
Jan 24 Javascript
php结合js实现多条件组合查询
May 28 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
小程序云开发初探(小结)
2018/10/24 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python连接PostgreSQL数据库的方法
2016/11/28 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
python热力图实现简单方法
2021/01/29 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
硕士生工作推荐信
2014/03/07 职场文书
个人求职信格式范文
2015/03/20 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
转正申请报告格式
2015/05/15 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
openstack云计算keystone组件工作介绍
2022/04/20 Servers