VUE 分页组件
<!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 分页组件的更多相关文章
- 基于 bootstrap 的 vue 分页组件
申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...
- java+springBoot+Thymeleaf+vue分页组件的定义
导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...
- vue分页组件table-pagebar
之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作 ...
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件
第三章 建议学习时间8小时 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...
- vue分页组件重置到首页问题
分页组件,可以借用这个老哥的@暴脾气大大https://www.cnblogs.com/sebastian-tyd/p/7853188.html#4163272 但是有一个问题就是下面评论中@ Mrz ...
- vue分页组件二次封装---每页请求特定数据
关键步骤: 1.传两个参数:pageCount (每页条数).pageIndex (页码数): 2.bind方法的调用 <!-- 这部分是分页 --> <div class=&quo ...
- vue分页组件
<template> <div> <ul class="pagination"> <li @click="goTo(1)&quo ...
- vue分页组件火狐中出现样式问题
分页的操作到了火狐浏览器会样式 怎么解决? 其实就是将input的type属性变成了text,因为number属性会变成上下的小箭头
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
随机推荐
- c++ thread
Either pthread_join(3) or pthread_detach() should be called for each thread,that an application crea ...
- Python: Pandas的DataFrame如何按指定list排序
本文首发于微信公众号“Python数据之道”(ID:PyDataRoad) 前言 写这篇文章的起由是有一天微信上一位朋友问到一个问题,问题大体意思概述如下: 现在有一个pandas的Series和一个 ...
- javascript的setTimeout()与setTimeout()方法用法总结
setTimeout与setInterval的区别: setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code ...
- 关于QT5使用QtScript解析QJsonArray数组的问题
首先得在pro文件中加入QT+=script 然后导入相应的头文件 include <QStringList> #include <QtScript/QScriptEngine> ...
- eclipse在线安装s
1. 打开eclipse软件,点击菜单栏的help-->Install New Software 2. 在弹出来的安装窗口中,点击add按钮,然后输入svn安装地址:http://subclip ...
- 对象级别锁 vs 类级别锁 – Java
同步针对的是多线程.同步的方法或代码块同时只能由一个线程执行. Java支持多线程来执行.这可能会导致两个或多个线程访问同一个字段或对象.同步是一个使所有并发执行的线程同步的过程.同步避免了由于共享内 ...
- ionic 的缓存 和局部刷新
最近两天在做项目时,发现ionic的缓存功能非常方便好用,提高了再低端手机特别是android比较低版本上的流畅性!可是,后来发现,整体的缓存整个页面并不是一个一劳永逸的办法,结合局部刷新功能,感觉就 ...
- Kafka 源代码分析.
这里记录kafka源代码笔记.(代码版本是0.8.2.1) kafka的源代码如何下载.这里简单说一下. git clone https://git-wip-us.apache.org/repos/a ...
- 【Android Developers Training】 49. 轻松录制视频
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- Linux编程之epoll
现在有这么一个场景:我是一个很忙的大老板,我有100个手机,手机来信息了,我的秘书就会告诉我"老板,你的手机来信息了."我很生气,我的秘书就是这样子,每次手机来信息就只告诉我来信息 ...