基于Vue.js的表格分页组件


Posted in Javascript onMay 22, 2016

一、Vue.js简介

1、Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化

(1) 简洁

下面看一段Angular的实现双向绑定的代码

// html
<body ng-app="myApp">
 <div ng-controller="myCtrl">
 <p>{{ note }}</p>
 <input type="text" ng-model="note">
 </div>
</body>

// js
var myModule = angular.module('myApp', []);

myModule.controller('myCtrl', ['$scopp', function($scope) {
 $scope.note = '';
]);

然后再看一下Vue的代码:

// html
<body>
 <div id="app">
 <p>{{ note }}</p>
 <input type="text" v-model="note">
 </div>
</body>

// js
var vm = new Vue({
 el: '#app',
 data: {
 note: ''
 }
})

相比较而言我个人认为Vue的代码编写风格更加简洁,并且通俗易懂。

(2)不失优雅

Vue虽然是一个比较轻量级的框架,简单轻量的同时还非常的人性化,其提供的API也是非常的容易理解,同时也提供了一些很便捷的指令和属性。

例如:

1)、绑定click事件

<a v-on:click="doSomething"></a>

可以简写为:

<a @click="doSomething"></a>

2)、 绑定动态属性

<a v-bind:href="url"></a>

可以简写为:

<a :href="url"></a>

3)、便捷的修饰符

<!-- 阻止单击事件冒泡 -->
<a @click.stop="doSomething"></a>

<!-- 只在按下回车键的时候触发事件 -->
<input @keyup.enter="submit">

4)、实用的参数特性

<!-- debounce 设置一个最小的延时 -->
<input v-model="note" debounce="500">

<!-- 在 "change" 而不是 "input" 事件中更新数据 -->
<input v-model="msg" lazy>

怎么样,是不是感觉优雅极了。

(3)小巧

说起小巧,那应该首先要关注下Vue的源码大小,Vue的成产版本(即min版)源码仅为72.9kb,官网称gzip压缩后只有25.11kb,相比Angular的144kb缩小了一半。

小巧的一种好处就是可以让用户更自由的选择相应的解决方案,在配合其他库方面它给了用户更大的空间。

如Vue的核心默认是不包含路由和 Ajax 功能,但是如果项目中需要路由和AJAX,可以直接使用Vue提供的官方库Vue-router及第三方插件vue-resource,同时你也可以使用其他你想要使用的库或插件,如jQuery的AJAX等。

是不是感觉非常的灵活。

(4)不乏大匠

Vue虽然小巧,但是“麻雀虽小五脏俱全”,在构建大型应用的时候也是得心应手。

1)、模块化

结合一些第三方模块构建工具,如CommonJS、RequireJS或者SeaJs,可以轻松实现代码的模块化。

但是在这里小编不推荐使用上述构建工具,直接使用ES6的模块化功能,再结合Webpack进行相应打包是目前最热门的方案。

不了解ES6模块功能的可以详见:链接地址

在今后的文章中,我也会对其进行介绍,包括Webpack的配置。

2)、组件化

Vue的组件化功能可谓是它的一大亮点,通过将页面上某一组件的html、CSS、js代码放入一个.vue的文件中进行管理可以大大提高代码的维护性。

例如:

// App.vue
<template>
 <div class="box" v-text="note"></div>
</template>

<script>
export default {
 data () {
 return {
 note: '这是一个组件的html模板!'
 }
 }
}
</script>

<style scoped>
.box {
 color: #000;
}
</style>

我们还可以在组件里写一些预处理语言:

// App.vue
<template lang='jade'>
 div(class="box" v-text="text")
</template>

<script>
export default {
 data () {
 return {
 note: '这是一个组件的html模板!'
 }
 }
}
</script>

<style lang="stylus">
.box 
 color: #000
</style>

当然这样写我们是需要通过webpack来进行打包的,推荐使用Webpack + vue-loader的方式,同时使用ES6语法,需要安装babel来进行转换。因为文章为浅谈Vue.js,所以这里不做深入介绍。

3)、路由

和Angular一样,Vue也具有它的路由功能。通过路由功能,我们可以实现各个组件的按需加载,轻松构建单页应用。下面是一个简单的路由配置文件:

// router.js

'use strict'

export default function(router) {
 router.map({
 '/': {
 component: function (resolve) {
 require(['./components/Foo.vue'], resolve)
 }
 },
 '/foo': {
 component: function (resolve) {
 require(['./components/Foo.vue'], resolve)
 }
 },
 '/bar': {
 component: function (resolve) {
 require(['./components/Bar.vue'], resolve)
 }
 }
 })
}

二、BootPage组件简介

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

如需高大上的组件,可以移步Vue官方组件库

(1)使用方法

在.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

(2)组件源码

至于分页的实现源码这里的就不展示了,所有源码我都上传到了我的github,地址

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

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

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

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
js正则表达式replace替换变量方法
May 21 #Javascript
深入解析JavaScript中的立即执行函数
May 21 #Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 #Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 #Javascript
基于javascript实现表格的简单操作
May 21 #Javascript
javascript检测移动设备横竖屏
May 21 #Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 #Javascript
You might like
php自定义函数之递归删除文件及目录
2010/08/08 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
许愿墙中用到的函数
2006/10/07 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
Python编程argparse入门浅析
2018/02/07 Python
深入浅析python 中的匿名函数
2018/05/21 Python
jupyter实现重新加载模块
2020/04/16 Python
python Matplotlib模块的使用
2020/09/16 Python
Python-split()函数实例用法讲解
2020/12/18 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
运动会广播稿500字
2014/01/28 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
优秀纪检干部材料
2014/08/27 职场文书
创业计划书之烤红薯
2019/09/26 职场文书