基于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 相关文章推荐
浅谈Sizzle的“编译原理”
Apr 14 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
node中的密码安全(加密)
Sep 17 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
js实现图片上传到服务器和回显
Jan 19 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
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python常用库推荐
2016/12/04 Python
python3 爬取图片的实例代码
2018/11/06 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
python编写猜数字小游戏
2019/10/06 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
关于爱国的演讲稿
2014/05/07 职场文书
产品包装策划方案
2014/05/18 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
初中作文评语
2014/12/25 职场文书
家长会欢迎词
2015/01/23 职场文书
小学大队干部竞选稿
2015/11/20 职场文书