<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{display:inline-block;margin:0 5px;height:20px;color:#666;background:#eee;text-decoration:none;padding:0 10px;text-align:center;line-height:20px;background:#ccc}
a.active{background:#008B8B;color:#fff}
</style>
</head>
<body>
<div id="app">
<page-component :pageCount="page.pageCount" :pagesize="page.pageSize" :pageIndex="page.pageIndex" @getdata='getData' @get="getPage"></page-component>
</div>
</body>
<script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<script>
Vue.component('page-component',{
props:['pagecount','pageindex','pagesize'],
data () {
return {
current:this.pageindex,
showItem:this.pagesize,
allPage:this.pagecount
}
},
template:`
<div class="page">
<a href="javascript:" v-show="current != 1" @click="current-- && goto(current)">上一页</a>
<a href="javascript:" v-for="index in pages" :class="{active:(index == current)}" @click="goto(index)" :key="index">{{index}}</a>
<a href="javascript:" v-show="current != allPage && allPage!= 0" @click="current++ && goto(current)">下一页</a>
</div>
`,
computed:{
pages:function(){
var pag = [];
if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
//总页数和要显示的条数那个大就显示多少条
var i = Math.min(this.showItem,this.allPage);
while(i){
pag.unshift(i--);
}
}
else
{ //当前页数大于显示页数了
var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
i = this.showItem;
if( middle > (this.allPage - this.showItem) ){
middle = (this.allPage - this.showItem) + 1
}
while(i--){
pag.push( middle++ );
}
}
return pag
}
},
methods:{
goto:function(index){
this.current =index;
this.$emit('get',index)
this.$emit('getdata')
}
}
});

new Vue({
el:'#app',
data:{
page:{
pageCount:10, //总页数
pageIndex:1, //默认页
pageSize:5 //每次显示页数
}
},
methods:{
getPage:function(inx){
this.page.pageIndex = inx;
},
getData:function(){
alert("这里面写请求第"+this.page.pageIndex+"页数据");

//这里面执行ajax请求的分页信息
}
}
})
</script>
</html>

VUE 分页组件的更多相关文章

  1. 基于 bootstrap 的 vue 分页组件

    申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...

  2. java+springBoot+Thymeleaf+vue分页组件的定义

    导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...

  3. vue分页组件table-pagebar

    之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作 ...

  4. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3)：用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

  5. vue分页组件重置到首页问题

    分页组件,可以借用这个老哥的@暴脾气大大https://www.cnblogs.com/sebastian-tyd/p/7853188.html#4163272 但是有一个问题就是下面评论中@ Mrz ...

  6. vue分页组件二次封装---每页请求特定数据

    关键步骤: 1.传两个参数:pageCount (每页条数).pageIndex (页码数): 2.bind方法的调用 <!-- 这部分是分页 --> <div class=&quo ...

  7. vue分页组件

    <template> <div> <ul class="pagination"> <li @click="goTo(1)&quo ...

  8. vue分页组件火狐中出现样式问题

    分页的操作到了火狐浏览器会样式 怎么解决? 其实就是将input的type属性变成了text,因为number属性会变成上下的小箭头

  9. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

随机推荐

  1. Java IO流之随机读写流RandomAccessFile

    随机读写流RandomAccessFile 简介 此类的实例支持对随机访问文件的**读取和写入**. 随机访问文件的行为类似存储在文件系统中的一个大型 byte 数组. 存在指向该隐含数组的光标或索引 ...

  2. Java IO流之打印流与标准流

    一.打印流 1.1打印流特点与构造方法 1)PrintStream和PrintWriter类都提供了一系列重载的print和println方法来输出各种类型的数据. 2)PrintStream和Pri ...

  3. Centos 环境一键部署脚本（shell脚本）

    谨以此文纪念吊炸天的Centos环境一键部署方案的新鲜出炉 辛苦大半年,产品准备上线了,BOSS亲自体验安装部署,看着超过200+页的安装文档直接崩溃了(需要部署23个基础服务),经历了超过3个小时的 ...

  4. map,zip,reduce函数

    lt=range(5,10) lw=range(8,13) def mul(a,b): return a*b def mul_list(param1,param2): return_list=[] f ...

  5. 网页 cookie

    定义: 从JavaScript的角度看,cookie 就是一些字符串信息.这些信息存放在客户端的计算机中,用于客户端计算机与服务器之间传递信息. 使用:document.cookie = 'usern ...

  6. Chapter2：Discrete-Time Signal Processing and Short-Time Fourier Analysis

    作者:桂. 时间:2017-05-24  08:44:53 主要是<Speech enhancement: theory and practice>的读书笔记,全部内容可以点击这里. 这一 ...

  7. go的基本概念

    go的基础结构主要由下面的几个部分组成 1:包的声明 2:引入包 3:函数 4:变量 5:语句表达式 6注释 package main import "fmt" func main ...

  8. celery_01 _celery安装启动

    简介:celery是一个分布式队列的管理工具,提供了快速管理和操作分布式任务队列的一些方法的框架 特点:1.celery易于使用和维护,不需要进行很复杂的配置,简单的celery例子: from ce ...

  9. python+NLTK 自然语言学习处理：环境搭建

    首先在http://nltk.org/install.html去下载相关的程序.需要用到的有python,numpy,pandas, matplotlib. 当安装好所有的程序之后运行nltk.dow ...

  10. echarts3 清空上一次加载的series数据

    今天做图表的时候发现了一个问题,想和大家分享一下 我有一个下拉选框,每次选中都切换不同的数据,数据是从后台查询获取的,但是如果后台返回了数据每次渲染都没有问题,如果后台没有返回数据,但是我在渲染图表的 ...