vue2.0实现分页组件

http://www.php361.com/index.php?c=index&a=view&id=4671

http://www.yanglajiao.com/article/sinat_36422236/79474987

最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下:

该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己调整:

首先新建pagination.vue文件, 所有组件的代码都写在这里, 写这样的组件并没有什么太大的难度, 主要是解决父子组件之间值传递的问题

[源码] view plain

<template>
<nav>
<ul class="pagination">
<li :class="{'disabled': current == 1}"><a href="javascript:;" @click="setCurrent(current - 1)"> « </a></li>
<li :class="{'disabled': current == 1}"><a href="javascript:;" @click="setCurrent(1)"> 首页 </a></li>
<li v-for="p in grouplist" :class="{'active': current == p.val}"><a href="javascript:;"
@click="setCurrent(p.val)"> {{ p.text }} </a>
</li>
<li :class="{'disabled': current == page}"><a href="javascript:;" @click="setCurrent(page)"> 尾页 </a></li>
<li :class="{'disabled': current == page}"><a href="javascript:;" @click="setCurrent(current + 1)"> »</a></li>
</ul>
</nav>
</template>
<script type="es6">
export default{
data(){
return {
current: this.currentPage
}
},
props: {
total: {// 数据总条数
type: Number,
default: 0
},
display: {// 每页显示条数
type: Number,
default: 10
},
currentPage: {// 当前页码
type: Number,
default: 1
},
pagegroup: {// 分页条数
type: Number,
default: 5,
coerce: function (v) {
v = v > 0 "less">
.pagination {
overflow: hidden;
display: table;
margin: 0 auto;
/*width: 100%;*/
height: 50px;
li {
float: left;
height: 30px;
border-radius: 5px;
margin: 3px;
color: #666;
&
:hover {
background: #000;
a {
color: #fff;
}
}
a {
display: block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 12px;
border-radius: 5px;
text-decoration: none
}
}
.active {
background: #000;
a {
color: #fff;
}
}
}
</style>

使用时, 在父组件中引入, 代码如下:

[源码] view plain

<template>
<v-pagination :total="total" :current-page='current' @pagechange="pagechange"></v-pagination>
</template>
<script type="es6">
import pagination from '@/components/common/pagination/pagination'
export default{
data(){
return {
total: 150, // 记录总条数
display: 10, // 每页显示条数
current: 1, // 当前的页数
},
methods: {
pagechange:function(currentPage){
console.log(currentPage);
// ajax请求, 向后台发送 currentPage, 来获取对应的数据
}
},
components: {
'v-pagination': pagination,
}
}
</script>

至此, 一个基于 vue2.0 的分页组件就完成了

...

1.模板 pagination.vue

<template><div class="pagination"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 15, 30]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div>
</template>
<script type="text/ecmascript-6">
let pageNum = 1;export default {props: {total: {type: Number,default: 0},currentPage: {type: Number,default: 1}},data() {return {pageSize: 10};},methods: {handleSizeChange(val) {this.pageSize = val;this.$emit('search', 1, this.pageSize);},handleCurrentChange(val) {pageNum = val;this.$emit('search', pageNum, this.pageSize);}}};
</script>

2.在父组件中引用，注册

<pagination @search="search" :total="total" :currentPage = "curPage"></pagination><script>import pagination from './../template/pagination.vue'export default {components:{"pagination":pagination,},data() {return {tableData: [],dataObj:{},curPage: 1,total:100,pageSize:10,}},created(){this.getData();console.log(this.$refs) },methods: {getData(num,pageSize){let self = this;const params = new URLSearchParams();var startTime = self.value1[0];var endTime = self.value1[1];if(startTime == ''){startTime = '';}else{startTime = self.getTime(startTime);}if(endTime == ''){endTime = ''}else{endTime = self.getTime(endTime);}self.dataObj = {userName:self.userName,realName:self.realName,isClose:self.isClose,beginDate:startTime,endDate:endTime}if(!num){num = 1}if(!pageSize){pageSize = 10}let data = self.param(self.dataObj,num,pageSize);params.append('param',data);if(process.env.NODE_ENV === 'development'){self.url = '/s1/copUser/getUserList';};self.$axios.post(self.url, params).then((res) => {self.tableData = res.data.data.list;self.total = res.data.total;})},async search(pageNum1,pageSize1){let pageNum = this.curPage = (typeof (pageNum1) === 'number') ? pageNum1 : 1;if (pageSize1) {this.pageSize = pageSize1;};let pageSize = pageSize1 || this.pageSize;this.is_search = true;this.getData(pageNum,pageSize);}}}

这样就能用了，不过要注意分页要和获得的数据做配合，拿到数据后要自己进行处理

vue2.0实现分页组件相关推荐

vue2.0桌面端框架_Element-UI组件库(Vue2.0桌面端组件库)V2.9.2 免费版
Element-UI组件库(Vue2.0桌面端组件库)是一款很优秀好用的为开发者.设计师和产品经理推出的基于Vue 2.0的桌面端组件库软件.小编带来的这款Element-UI组件库功能强大全面,简单 ...
vue tree组件_基于 Vue2.0 和 HeyUI 组件库的中后端系统 HeyUI Admin
介绍 heyui-admin 是一个成熟的企业应用解决方案,基于 vue2.0 和 heyui 组件库的中后端系统. 功能 - Js - common / 通用 - ajax / 封装axios - ...
vue2.0 如何自定义组件（vue组件的封装）
一.前言之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
vue结合饿了么_饿了么基于Vue2.0的通用组件开发之路（分享会记录）
Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...
基于VUE2.0的分页插件
https://www.cnblogs.com/vivaxiaonan/p/9987985.html 基于jQuery的分页插件很多,今天分享一下基于Vue的分页插件pagination.js,该插件 ...
vue2.0 class声明组件_案例精选 | 蘑菇街、滴滴、淘宝、微信的组件化架构解析
导读:前段时间公司项目打算重构,准确来说应该是按之前的产品逻辑重写一个项目.在重构项目之前涉及到架构选型的问题,我和组里小伙伴一起研究了一下组件化架构,打算将项目重构为组件化架构.当然不是直接拿来照搬 ...
vue组件中嵌套html,vue2.0怎么用组件自定义标签实现组件的嵌套？
想用这种方式实现组件嵌套: 目前实现的方式:是在app-content.vue中的template中嵌套的 index.html main.js import Vue from '../node_mo ...
vue2.0 非父子组件之间的单一事件通信
前言 vue官网指出: 通过使用事件中心,允许组件自由交流,无论组件处于组件树的哪一层.由于 Vue 实例实现了一个事件分发接口,你可以通过实例化一个空的 Vue 实例来实现这个目的. 也就是说非父 ...
vue2.0中transition组件的用法
作用:实现元素进入/离开的过渡效果. 首先,让我们举个栗子: <!DOCTYPE html> <html lang="en"><head>< ...

vue2.0实现分页组件

vue2.0实现分页组件相关推荐

最新文章

热门文章