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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
webpack4从0搭建组件库的实现
Nov 29 Javascript
vue实现简易的双向数据绑定
Dec 29 Vue.js
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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
php 抽象类的简单应用
2011/09/06 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
js实现微博发布小功能
2017/01/12 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
初步认识Python中的列表与位运算符
2015/10/12 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
python zip()函数使用方法解析
2019/10/31 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
网络维护管理员的自我评价分享
2013/11/11 职场文书
好的演讲稿开场白
2013/12/30 职场文书
出国留学英文自荐信
2015/03/25 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
2016年会开场白台词
2015/06/01 职场文书
疾病证明书
2015/06/19 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书