Vue 实现一个分页组件
实现分页组件要分三个部分
样式,逻辑,和引用
首先新建一个vue文件用来承载组件内容
第一步:构建样式
<template>
<nav>
<ul class="pagination">
<li :class="{'disabled': current == 1}"><a href="javascript:;" @click="setCurrent(current - 1)"> <img src="../../../assets/btnleft.png" alt=""> </a></li>
<li v-for="(p,index) in grouplist" :class="{'active': current == p.val}" :key="index"><a href="javascript:;" @click="setCurrent(p.val)"> {{ p.text }} </a>
</li>
<li :class="{'disabled': current == page}"><a href="javascript:;" @click="setCurrent(current + 1)"> <img src="../../../assets/btnright.png" alt=""></a></li>
</ul>
</nav>
</template>
<style scope="scope">
.pagination {
overflow: hidden;
display: table;
margin: 0 auto;
height: 50px;
}
.pagination li {
float: left;
height: 30px;
border-radius: 5px;
margin: 3px;
}
.pagination li img{
width:100%;
height:100%;
}
.pagination li:hover{
background: #1E7FED;
}
.pagination li:hover a{
color: #fff;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 12px;
border-radius: 5px;
text-decoration: none;
border:1px solid rgba(221,221,221,1);
color: #666666;
}
.pagination .active {
background: #1E7FED !important;
}
.active >a{
color:white;
}
</style>
第二步:编写逻辑
<script>
export default{
data(){
return {
current: this.currentPage
}
},
props: {
total: {// 数据总条数
type: Number,
default: 0
},
display: {// 每页显示条数
type: Number,
default: 20
},
currentPage: {// 当前页码
type: Number,
default: 1
},
pagegroup: {// 分页条数
type: Number,
default: 20,
coerce: function (v) {
v = v > 0 ? v : 20;
return v % 2 === 1 ? v : v + 1;
}
}
},
computed: {
page: function () { // 总页数
return Math.ceil(this.total / this.display);
},
grouplist: function () { // 获取分页页码
var len = this.page, temp = [], list = [], count = Math.floor(this.pagegroup / 2), center = this.current;
if (len <= this.pagegroup) {
while (len--) {
temp.push({text: this.page - len, val: this.page - len});
}
return temp;
}
while (len--) {
temp.push(this.page - len);
}
var idx = temp.indexOf(center);
(idx < count) && ( center = center + count - idx);
(this.current > this.page - count) && ( center = this.page - count);
temp = temp.splice(center - count - 1, this.pagegroup);
do {
var t = temp.shift();
list.push({
text: t,
val: t
});
} while (temp.length);
if (this.page > this.pagegroup) {
(this.current > count + 1) && list.unshift({text: '...', val: list[0].val - 1});
(this.current < this.page - count) && list.push({text: '...', val: list[list.length - 1].val + 1});
}
return list;
}
},
methods: {
setCurrent: function (idx) {
if (this.current != idx && idx > 0 && idx < this.page + 1) {
this.current = idx;
this.$emit('pagechange', this.current);
}
}
}
}
</script>
第三步:引用组件
1.在父组件中引入并注册
total:0, // 记录总条数
display: 10, // 每页显示条数
current: 1, // 当前的页数
3.挂载
Vue 实现一个分页组件的更多相关文章
- 基于vue2.0的一个分页组件
分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...
- 使用vue完成一个分页效果
基于 element-ui 分页组件实现分页效果 效果如下: 使用说明: 0.首先在头部引入需要的外部文件 1.从element官方网页中复制想要的组件代码直接放入body中 2.编写逻辑代码 3.完 ...
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
文章目录 1.看实现的效果 2.前端vue页面核心代码 2.1. 表格代码(表格样式可以去elementui组件库直接调用相应的) 2.2.分页组件代码 2.3 .script中的代码 3.后端核心代 ...
- 使用Vue实现一个树组件
HTML代码: <!DOCTYPE html> <html> <head> <title>Vue Demo</title> <meta ...
- 基于Vue封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...
- asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题
刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...
- 基于 bootstrap 的 vue 分页组件
申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...
- Vue 2.0 pagination分页组件
最近写了一个分页组件,效果如下图: f-pagination.js文件 Vue.component('f-pagination',{ template:'<div class="fPa ...
- 基于Vue的简单通用分页组件
分页组件是每一个系统里必不可少的一个组件,分页组件分为两部分.第一部分是模版部分,用于显示当前分页组件的状态,例如正在获取数据.没有数据.没有下一页等等:第二部分是分页数据对象,用于封装一个分页组件的 ...
随机推荐
- window7下docker toolbox 启用数据卷报错: Error response from daemon: invalid mode:
场景:希望把d:\dockerShare文件夹作为数据卷 ,和docker中的centos镜像生成的容器关联. 原来的命令: docker run -d -it --name=edc-centos7 ...
- mysql CREATE DATABASE语句 语法
mysql CREATE DATABASE语句 语法 作用:创建数据库. 大理石构件 语法:CREATE DATABASE database_name mysql CREATE DATABASE语句 ...
- 最短路(模板)【CodeChef CLIQUED,洛谷P3371】
自TG滚粗后咕咕咕了这么久,最近重新开始学OI,也会慢慢开始更博了.... 最短路算法经典的就是SPFA(Bellman-Ford),Dijkstra,Floyd: 本期先讲两个经典的单源最短路算法: ...
- 题解 P1433 【吃奶酪】
这道题是一道著名的NP问题. 正解应该是DP,但我在这里讲一种近似算法--爬山. 希望某些dalao注意一下爬山与模拟退火的区别. 爬山是直往低处往高处爬,每次取大的,也就是一种贪心思想. 而模拟退火 ...
- HDU 1002 A - A + B Problem II (大数问题)
原题代号:HDU 1002 原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1002 原题描述: Problem Description I have a ...
- 170906-MyBatis续
===============================================Dynamic SQL========================================== ...
- K-th occurrence HDU - 6704 (后缀数组+二分线段树+主席树)
大意: 给定串s, q个询问(l,r,k), 求子串s[l,r]的第kk次出现位置. 这是一篇很好的题解: https://blog.csdn.net/sdauguanweihong/article/ ...
- Understanding RequireJS for Effective JavaScript Module Loading
Modular programming is used to break large applications into smaller blocks of manageable code. Modu ...
- 转:SqlBulkCopy类进行大数据(一万条以上)插入测试
转自:https://www.cnblogs.com/LenLi/p/3903641.html 结合博主实例,自己测试了一下,把数据改为3万行更明显!! 关于上一篇博客中提到的,在进行批量数据插入数据 ...
- 图像bayer格式介绍【转】
本文转载自:http://www.cnblogs.com/whw19818/p/6223143.html 1 图像bayer格式介绍 bayer格式图片是伊士曼·柯达公司科学家Bryce Bayer发 ...