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 相关文章推荐
关于document.cookie的使用javascript
Oct 29 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
Json解析的方法小结
Jun 22 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
写一个Vue Popup组件
Feb 25 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
js实现点击生成随机div
Jan 16 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
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
composer.lock文件的作用
2016/02/03 PHP
Javascript基础教程之break和continue语句
2015/01/18 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
JS中Safari浏览器中的Date
2017/07/17 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
浅谈Python基础—判断和循环
2019/03/22 Python
Python下简易的单例模式详解
2019/04/08 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
本科毕业生专业自荐书范文
2014/02/05 职场文书
运动会稿件50字
2014/02/17 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
工程款申请报告
2015/05/15 职场文书
导游词之包公祠
2019/11/25 职场文书
Python学习之os包使用教程详解
2022/03/21 Python
Python进程池与进程锁之语法学习
2022/04/11 Python