基于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 相关文章推荐
纯js分页代码(简洁实用)
Nov 05 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
js中跨域方法原理详解
Jul 19 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
基于layui的下拉列表的数据回显方法
Sep 24 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 EOT定界符的使用详解
2008/09/30 PHP
浅谈php命令行用法
2015/02/04 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
Angular排序实例详解
2017/06/28 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
python爬虫基本知识
2018/03/05 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
Django的CVB实例详解
2020/02/10 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
函授本科毕业自我鉴定
2013/10/09 职场文书
幼教毕业生自我鉴定
2014/01/12 职场文书
高一英语教学反思
2014/01/22 职场文书
个人近期表现材料
2014/02/11 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
任命书怎么写
2015/03/02 职场文书
小学见习报告
2015/06/23 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS