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 相关文章推荐
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
javascript封装简单实现方法
Aug 11 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
javascript实现放大镜功能
Dec 09 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递归实现无限分类 格式化数组的详解
2013/06/08 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
jquery里的正则表达式说明
2011/08/03 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
详解Python函数作用域的LEGB顺序
2016/05/14 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
Django中template for如何使用方法
2021/01/31 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
2014新课程改革心得体会
2014/03/10 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
机关作风建设整改方案
2014/10/27 职场文书
任命书标准格式
2015/03/02 职场文书
求职简历自我评价范文
2015/03/10 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
四年级数学教学反思
2016/02/16 职场文书
Mysql排序的特性详情
2021/11/01 MySQL
Go语言 详解net的tcp服务
2022/04/14 Golang
Golang ort 中的sortInts 方法
2022/04/24 Golang