Vue组件BootPage实现简单的分页功能


Posted in Javascript onSeptember 12, 2016

有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧。 

这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage。 

不了解Vue.js的童鞋可以移步我的上一篇文章《浅谈Vue.js》了解一下。 

BootPage组件简介 

其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件库里分页组件都功能太强大或者没有适合我的,所以就自己写了一个凑合着用,或许有人和我一样需要这样一个简单的分页组件来实现简单的分页功能,我便在这里分享一下,大家自觉填坑咯。 

如需高大上的组件,可以移步Vue官方组件库:https://github.com/vuejs/awesome-vue#libraries--plugins 

BootPage是一款支持静态数据和服务器数据的表格分页组件,支持调整每页显示行数和页码显示个数,样式基于bootstrap,就像这样: 

Vue组件BootPage实现简单的分页功能

 在线演示:https://luozhihao.github.io/B... 

使用方法 

在.vue的组件文件中我们这样写template,即html代码: 

<table class="table table-hover table-bordered">
 <thead>
  <tr>
  <th width="10%">id</th>
  <th width="30%">name</th>
  <th width="40%">content</th>
  <th width="20%">remark</th>
  </tr>
 </thead>
 <tbody>
  <tr v-for="data in tableList">
  <td v-text="data.num"></td>
  <td v-text="data.author"></td>
  <td v-text="data.contents"></td>
  <td v-text="data.remark"></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
  <td colspan="4">
   <div class="pull-left">
   <button class="btn btn-default" v-on:click="refresh">刷新</button>
   </div>
   <div class="pull-right">
   <boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen" :param="param"></boot-page>
   </div>
  </td>
  </tr>
 </tfoot>
</table>

<boot-page>标签中async指是否从服务器端获取数据,false为否;data为静态的表格数据数组;lens为每页显示行数的数组;page-len为可显示的页码数;

使用静态数据的javascript代码即script标签内的内容如下: 

<script>
 import bootPage from './components/BootPage.vue'

 export default {
  data () {
  return {
   lenArr: [10, 50, 100], // 每页显示长度设置
   pageLen: 5, // 可显示的分页数
   lists: [
   {num: 1, author: 'luozh', contents: 'BootPage是一款支持静态数据和服务器数据的表格分页组件', remark: 'dsds'},
   {num: 2, author: 'luozh', contents: '支持调整每页显示行数和页码显示个数,样式基于bootstrap', remark: 'dsds'},
   {num: 3, author: 'luozh', contents: '<boot-page>标签中async指是否从服务器端获取数据,false为否', remark: 'dsds'},
   {num: 4, author: 'luozh', contents: 'data为静态的表格数据数组;', remark: 'dsds'},
   {num: 5, author: 'luozh', contents: 'lens为每页显示行数的数组', remark: 'dsds'},
   {num: 6, author: 'luozh', contents: 'page-len为可显示的页码数', remark: 'dsds'},
   {num: 7, author: 'luozh', contents: '服务器回传参数为{data:[], page_num: 6}, 其中data为表格数据,page_num为总页数', remark: 'dsds'},
   {num: 8, author: 'luozh', contents: '可以调用this.$refs.page.refresh()刷新表格数据', remark: 'dsds'}
   ], // 表格原始数据,使用服务器数据时无需使用
   tableList: [] // 分页组件传回的分页后数据
  }
  },
  components: {
  bootPage
  },
  events: {

  // 分页组件传回的表格数据
  'data' (data) {
   this.tableList = data
  }
  }
 }
</script>

一般我们很少使用静态的表格数据,大多数应用的数据都是从服务器端获取的,所以这里提供了获取服务器分页数据的方法: 

使用服务器数据的组件HTML如下: 

<boot-page v-ref:page :async="true" :lens="lenArr" :url="url" :page-len="pageLen" :param="param"></boot-page>
其中url为服务器的请求地址;param为需要向服务器发送的参数对象; 

使用服务器数据javascript的代码如下: 

<script>
 import bootPage from './components/BootPage.vue'

 export default {
  data () {
  return {
   lenArr: [10, 50, 100], // 每页显示长度设置
   pageLen: 5, // 可显示的分页数
   url: '/bootpage/', // 请求路径
   param: {}, // 向服务器传递参数
   tableList: [] // 分页组件传回的分页后数据
  }
  },
  methods: {
  refresh () {
   this.$refs.page.refresh() // 这里提供了一个表格刷新功能
  }
  },
  components: {
  bootPage
  },
  events: {

  // 分页组件传回的表格数据(这里即为服务器传回的数据)
  'data' (data) {
   this.tableList = data
  },

  // 刷新数据
  'refresh' () {
   this.refresh()
  }
  }
 }
</script>

注:服务器除了传给组件表格的数组内容,还需一个总页数的键名,名为page_num 

组件自带向服务器传递的参数为: 

{
    active: 1, // 当前页码
    length: 5  // 每页显示个数
}

服务器回传的参数需为:

{
    data: [], // 表格数据
    page_num: 5  // 总页数
}
  

组件源码 

至于分页的实现源码这里的就不展示了,所有源码我都上传到了我的github,地址为:https://github.com/luozhihao/BootPage 

这里事先提个醒:因为这个组件是我用几个小时赶出来的,所以对于Vue组件的编写格式和规范肯定是考虑不周的,没有完全独立出来,所以自觉填坑咯,这里只作分享。 

当然你也可以随意的修改组件的代码来适合自己项目的使用,毕竟实现大而全的分页组件还是比较复杂的。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

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

Javascript 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 #Javascript
初识简单却不失优雅的Vue.js
Sep 12 #Javascript
jQuery实现简单的tab标签页效果
Sep 12 #Javascript
深入探讨Vue.js组件和组件通信
Sep 12 #Javascript
前端框架Vue.js中Directive知识详解
Sep 12 #Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 #Javascript
jQuery过滤选择器用法示例
Sep 12 #Javascript
You might like
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
vue组件实例解析
2017/01/10 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
javascript实现固定侧边栏
2021/02/09 Javascript
简单上手Python中装饰器的使用
2015/07/12 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
python频繁写入文件时提速的方法
2019/06/26 Python
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
三严三实对照检查材料
2014/08/25 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
Golang 切片(Slice)实现增删改查
2022/04/22 Golang
浅析JavaScript中的变量提升
2022/06/01 Javascript