基于vue.js组件实现分页效果


Posted in Javascript onDecember 29, 2018

前言

为了练习vue.js 之前做了一个vue.js前端分页效果,后面看到vue.js组件内容,就试着把这个功能写成一个简单组件,向组件元素传递一个object参数,包含分页数据,显示的列名信息,分页信息,组件提供一个事件,传递给父元素一个分页信息,父元素拿着分页信息获取数据,修改之前的object。这样就实现了分页效果。

效果

基于vue.js组件实现分页效果

知识点

  • 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 - 易?荷?lt;/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组件实现分页效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
javascript拖拽应用实例
Mar 25 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 #Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 #jQuery
Vue实现简单分页器
Dec 29 #Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 #Javascript
基于vue.js实现分页查询功能
Dec 29 #Javascript
小程序日历控件使用方法详解
Dec 29 #Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 #jQuery
You might like
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
python mysqldb连接数据库
2009/03/16 Python
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
python脚本后台执行方式
2019/12/21 Python
python super用法及原理详解
2020/01/20 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
给酒店员工的表扬信
2014/01/11 职场文书
优秀教师演讲稿
2014/05/06 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
微笑服务标语
2014/06/24 职场文书
安全目标管理责任书
2014/07/25 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers