基于vue.js组件实现分页效果
前言
为了练习vue.js 之前做了一个vue.js前端分页效果，后面看到vue.js组件内容，就试着把这个功能写成一个简单组件，向组件元素传递一个object参数，包含分页数据，显示的列名信息，分页信息，组件提供一个事件，传递给父元素一个分页信息，父元素拿着分页信息获取数据，修改之前的object。这样就实现了分页效果。
效果
知识点
- components 组件
- props 父级向组件传参
- template 模板
- computed 计算属性
- $emit() 组件事件，组件先父级元素传参
html内容
对比之前html内容简洁多了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> CommonTest</title> <link rel="stylesheet" href="../bootstrap.min.css" /> </head> <body> <div class="container body-content"> <header> <h2>vue.js组件分页效果</h2> </header> <div id="test" class="form-group"> <my-component v-on:show-page="getPageData" v-bind:pager-data="pagerData"></my-component> </div> <hr /> <footer> <p>© 2017 - 易兒善</p> </footer> </div> </body> </html>
javascript内容
<script src="../vue.js"></script>
<script src="com.js"></script>
<script>
//模拟获取数据
var getData=function(){
var result = [];
for (var i = 0; i < 205; i++) {
result[i] ={name:'test'+i,id:i,age:(Math.random()*100).toFixed()};
}
return result;
}
var vue = new Vue({
el: "#test",
ready:function(){
this.dataAll = getData();
this.pagerData.page.totalCount = this.dataAll.length;
this.getPageData(this.pagerData.page);
},
methods: {
getPageData: function (page) {
this.pagerData.page.pagesize = page.pagesize;
this.pagerData.page.pageCurrent = page.pageCurrent;
this.pagerData.page.pageCount = Math.ceil(this.pagerData.page.totalCount / page.pagesize);// 修改分页信息
var newPageInfo = [];
for (var i = 0; i < page.pagesize; i++) {
var index =i+(page.pageCurrent-1)*page.pagesize;
if(index>this.pagerData.page.totalCount-1)break;
newPageInfo[newPageInfo.length] = this.dataAll[index];
}
this.pagerData.data = newPageInfo; // 修改分页数据
}
},
components: {
'my-component': pager
},
data: {
//所有数据，分页数据从这里取
dataAll:[],
pagerData:{
data:[],
rows:[{label:"ID",name:"id"},
{label:"名字",name:"name"},
{label:"年龄",name:"age"}
],
page:{
arrPageSize:[10,20,30,40],
pagesize:10,
pageCount:1,
pageCurrent:1,
totalCount:1
}
}
},
});
</script>
com.js组件内容
var pager = {
props: {
pagerData:{
type: Object,
default:function(){
return{
data:[],
rows:[],
page:{
//分页大小
pagesize:20,
//分页数
arrPageSize:[10,20,30,40],
//当前页面
pageCurrent:1,
//总分页数
pageCount:1,
//总数
totalCount:10
}
}
}
}
},
template: '<table class="table table-bordered table-responsive table-striped">\
<tr>\
<th v-for="item in pagerData.rows" v-on:click="sortBy(item.name)">{{item.label}}</th>\
</tr>\
<tr v-for="dataItem in pagerData.data | orderBy sortparam sorttype">\
<td v-for="item in pagerData.rows">{{dataItem[item.name]}}</td>\
</tr>\
</table>\
<div class="pager" id="pager">\
<span class="form-inline">\
<select class="form-control" v-model="pagesize" v-on:change="showPage(pageCurrent,$event)" number>\
<option v-for="item in pagerData.page.arrPageSize" value="{{item}}">{{item}}</option>\
</select>\
</span>\
<span class="btn btn-default" v-on:click="showPage(1,$event)">首页</span>\
<span class="btn btn-default" v-on:click="showPage(pageCurrent-1,$event)">上一页</span>\
<span class="form-inline">\
<input class="form-control" style="width:60px;text-align:center" type="text" v-model="pageCurrent" v-on:keyup.enter="showPage(mypageCurrent,$event,true)" />\
</span>\
<span>共{{pagerData.page.pageCount}}页</span>\
<span class="btn btn-default" v-on:click="showPage(pageCurrent+1,$event)">下一页</span>\
<span class="btn btn-default" v-on:click="showPage(pagerData.page.pageCount,$event)">尾页</span>\
<span>共{{pagerData.page.totalCount}}条数据，当前显示第{{startData}}-{{endData}}条记录</span>\
</div>',
data:function(){return{
mypagesize:10,
mypageCurrent:1,
sortparam:"",
sorttype:1,
}},
//计算属性
computed:{
// 分页大小 获取的时候显示父级传入的，修改的时候修改自身的。子组件不能修改父元素的值
pagesize:{
get:function(){
return this.pagerData.page.pagesize;
},
set:function(value){
this.mypagesize = value;
}
},
pageCurrent:{
get:function(){
return this.pagerData.page.pageCurrent;
},
set:function(value){
this.mypageCurrent = value;
}
},
startData:function(){
return this.pagerData.page.pagesize*(this.pagerData.page.pageCurrent-1)+1;
},
endData:function(){
var max =this.pagerData.page.pagesize*this.pagerData.page.pageCurrent;
return max>this.pagerData.page.totalCount?this.pagerData.page.totalCount:max;
}
},
methods:{
showPage: function (pageIndex, $event) {
if (pageIndex > 0) {
if(pageIndex>this.pagerData.page.pageCount) pageIndex = this.page.pageCount;
this.$emit('show-page',{pageCurrent:pageIndex,pagesize:this.mypagesize});//事件
}
},sortBy: function (sortparam) {
this.sortparam = sortparam;
this.sorttype = this.sorttype == -1 ? 1 : -1;
}
}
}
源码下载：vue.js组件实现分页效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue.js实现一个自定义分页组件vue-paginaiton
vue实现一个分页组件vue-paginaiton vue使用了一段时间的感触就是,我再也不想直接操作DOM了.数据绑定式的编程体验真是好.实现的一个分页组件. 这里的css就不放出来了,可以看直接去github上下载:vue-pagination 先上一张实例图吧 模版 <div class="page-bar"> <ul> <li v-if="showFirstText"><a v-on:click="cur-
-
vue.js表格分页示例
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu
-
Vue.js结合bootstrap前端实现分页和排序效果
写之前先抱怨几句.本来一心一意做.net开发的,渐渐地成了只做前端.最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面. 深知自己前端技术不足,以前虽说用asp.net前后台都做,但是,对于前端都是用现成的js库和页面模板,对于vue.js等框架基本没有接触过. 只怪自己不会写java,最近做一个项目,负责前端,后台传来数据不分页,前端收到所有数据后自己分页.我尽是无语. 正好最近在看vue.js.这个页面就用它来实现吧.顺便总结下. 排
-
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
与上篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备. 需求分析 还是先从需求入手,想想实现这样一个功能需要注意什么.大致流程如何.有哪些应用场景. 表格本身是一种非常常用的组件,用于展示一些复杂的数据时表现很好. 当数据比较多时,我们需要提供一些筛选条件,让用户更快列出他们关注的数据. 除了预设的一些筛选条
-
基于vue.js实现分页查询功能
利用vue.js实现数据库分页,供大家参考,具体内容如下 最新项目有一个分页功能,画面风格很简朴给的样图就用[1]表示页码了, 因此,我没有上网上找插件,自己简单的做了一个.作为菜鸟,代码可能有点青涩,请见谅. 除了vue我还引用了Bootstrap的类和图标 html <div class="paging"> <ul class="pagination" style="margin: 13px"> <li clas
-
基于Vue.js的表格分页组件
一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁 下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-
-
Vue.js bootstrap前端实现分页和排序
写之前先抱怨几句.本来一心一意做.net开发的,渐渐地成了只做前端.最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面. 深知自己前端技术不足,以前虽说用asp.net前后台都做,但是,对于前端都是用现成的js库和页面模板,对于vue.js等框架基本没有接触过. 只怪自己不会写java,最近做一个项目,负责前端,后台传来数据不分页,前端收到所有数据后自己分页.我尽是无语. 正好最近在看vue.js.这个页面就用它来实现吧.顺便总结下. 效
-
Vue.js实现无限加载与分页功能开发
本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js完成一个需求的思考过程:与一些构建大型应用的高阶教程相比,又更专注于一些零碎细节的实现,方便读者快速掌握.致用. 需求分析 当一个页面中信息量过大时(例如一个新闻列表中有200条新闻需要展示),就会产生问题,例如: >数据量过大,影响加载速度 >用户体验差,很难定位到之前自己看过的某篇文章 >
-
vue.js框架实现表单排序和分页效果
本文实例为大家分享了vue.js实现表单排序和分页的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../lib/vue.min.js" type="text/javascript"></script> <title>表格组件</title
-
使用vue.js制作分页组件
学习了vue.js一段时间,拿它来做2个小组件,练习一下. 我这边是用webpack进行打包,也算熟悉一下它的运用. 源码放在文末的 github 地址上. 首先是index.html <!DOCTYPE html> <html> <head> <title>Page</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: 'O