基于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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
js跳转页面方法总结
Jan 29 Javascript
Js apply方法详解
Feb 16 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
js中Generator函数的深入讲解
Apr 07 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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扩展介绍与开发教程
2010/08/19 PHP
php中JSON的使用方法
2015/04/30 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
php微信开发之谷歌测距
2018/06/14 PHP
php实现登录页面的简单实例
2019/09/29 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
python tqdm库的使用
2020/11/30 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
中国文明网签名寄语
2014/01/18 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
高中体育课教学反思
2016/02/16 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android