基于Vue.js的表格分页组件
转载自 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧。
这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage。
不了解Vue.js的童鞋可以移步我的上一篇文章《浅谈Vue.js》了解一下。
BootPage组件简介
其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件库里分页组件都功能太强大或者没有适合我的,所以就自己写了一个凑合着用,或许有人和我一样需要这样一个简单的分页组件来实现简单的分页功能,我便在这里分享一下,大家自觉填坑咯。
如需高大上的组件,可以移步Vue官方组件库: https://github.com/vuejs/awesome-vue#libraries--plugins
BootPage是一款支持静态数据和服务器数据的表格分页组件,支持调整每页显示行数和页码显示个数,样式基于bootstrap,就像这样:
使用方法
在.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="col-sm-12 pull-right">
- <boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen"></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: '123', remark: 'bootPage'},
- {num: 1, author: 'luozh', contents: '123', remark: 'bootPage'},
- {num: 1, author: 'luozh', contents: '123', remark: 'bootPage'},
- {num: 1, author: 'luozh', contents: '123', remark: 'bootPage'},
- {num: 1, author: 'luozh', contents: '123', remark: 'bootPage'},
- {num: 1, author: 'luozh', contents: '123', remark: 'bootPage'}
- ], // 表格原始数据,使用服务器数据时无需使用
- tableList: [] // 分页组件传回的分页后数据
- }
- },
- components: {
- bootPage
- },
- events: {
- // 分页组件传回的表格数据
- 'data' (data) {
- this.tableList = data
- }
- }
- }
- </script>
一般我们很少使用静态的表格数据,大多数应用的数据都是从服务器端获取的,所以这里提供了获取服务器分页数据的方法:
使用服务器数据的组件HTML如下:
- <boot-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.$broadcast('refresh') // 这里提供了一个表格刷新功能
- }
- },
- components: {
- bootPage
- },
- events: {
- // 分页组件传回的表格数据(这里即为服务器传回的数据)
- 'data' (data) {
- this.tableList = data
- }
- }
- }
- </script>
注:服务器除了传给组件表格的数组内容,还需一个总页数的键名,名为page_num
组件源码
至于分页的实现源码这里的就不展示了,所有源码我都上传到了我的github,地址为: https://github.com/luozhihao/BootPage
这里事先提个醒:因为这个组件是我用几个小时赶出来的,所以对于Vue组件的编写格式和规范肯定是考虑不周的,没有完全独立出来,所以自觉填坑咯,这里只作分享。
当然你也可以随意的修改组件的代码来适合自己项目的使用,毕竟实现大而全的分页组件还是比较复杂的。
收工,欢迎评论指正。
原创文章,转载请注明来自 一个萝卜一个坑 -博客园[http://www.cnblogs.com/luozhihao]
基于Vue.js的表格分页组件相关推荐
- vue php 分页组件,基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...
- iView 3.3.0 发布,基于 Vue.js 的企业级 UI 组件库
iView 3.3.0 发布了,代号 Transistor ,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品. 本次更新如下: https://www ...
- iView 3.4.0 发布,基于 Vue.js 的企业级 UI 组件库
百度智能云 云生态狂欢季 热门云产品1折起>>> iView 3.4.0 发布了,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品 ...
- Mint UI —— 基于 Vue.js 的移动端组件库
写文章登录 Mint UI -- 基于 Vue.js 的移动端组件库 杨奕 8 个月前 Mint UI GitHub:https://github.com/ElemeFE/mint-ui 项目主页:h ...
- 移动端cube界面设计html,滴滴开源基于 Vue.js 的移动端组件库 cube-ui
原标题:滴滴开源基于 Vue.js 的移动端组件库 cube-ui 开源最前线(ID:OpenSourceTop) 猿妹 整编 综合自:https://didi.github.io/cube-ui/ ...
- 说说如何基于 Vue.js 实现表格组件
我们基于 Vue.js 实现一个可根据某列进行排序的表格组件. 一个表格包含表头和数据两部分内容.因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在 ...
- 基于Vue.js的后台管理系统组件开发
什么是Vue Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合. ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- mint-ui(基于 Vue.js 的移动端组件库)
1.引入文件 引入全部组件 import Vue from 'vue' import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' impo ...
最新文章
- C语言编写Scheme解释器,C语言编写logo语言解释器 ,求高手指导
- 配置文件管理服务器,06-配置文件管理
- (86)Verilog HDL:三分频设计
- 计算机网络实验报告3-tcp,计算机网络实验报告3-TCP.doc
- 一题多解(二)—— 循环队列为空(满)的判断
- STL中的序列式容器——priority_queue(优先队列)
- 随手记---Pharming
- 博客园模板--博客园老牛大讲堂
- 马小云:利用信息差赚钱的暴利创业项目 ,批量开店月入3万
- C语言:寻找重复数字
- 动态规划 机器人军团 POJ2533 中等
- Google地图开发初级篇
- 关于自然语言处理中的语义与概念
- nodejs卸载安装
- 微擎支付返回商户单号_微信小程序支付流程
- MySQL#Update语句
- 【生活常识】如何能安逸的活着?
- 园林专业毕业论文范文
- Googlenbsp;Earth中高级使用技巧(二)
- js的单双引号嵌套问题