Vue.js仿Metronic高级表格(二)数据渲染


Posted in Javascript onApril 19, 2017

上篇使用Vue.js制作仿Metronic高级表格(一)静态设计介绍了需求、原型设计以及静态页面实现,这篇讲解如何使用Vue渲染数据,实现动态展示。

表格数据

先定义一个数组来保存所有数据:

var vm = new Vue({ 
 el:'#content', 
 data: { 
  book_list: [ 
   {id:1, name:"标准日本语", type: "文化", price:19.00, time: 1492502043}, 
   {id:2, name:"微观经济学", type: "经济", price:29.00, time: 1492502143}, 
   {id:3, name:"大数据时代", type: "经济", price:39.00, time: 1492502243}, 
   {id:4, name:"TCP/IP协议详解", type: "科技", price:49.00, time: 1492502343}, 
   {id:5, name:"大学英语", type: "文化", price:59.00, time: 1492502443}, 
  ] 
 } 
});

使用v-for指令来渲染,将tr标签改写成:

<tr v-for="(book, key) in book_list"> 
 <td v-text="key + 1"></td> 
 <td v-text="book.name"></td> 
 <td v-text="book.type"></td> 
 <td v-text="book.price"></td> 
 <td v-text="book.time"></td> 
 <td> 
  <button class="btn btn-info btn-xs"> 
   <i class="fa fa-pencil"></i> 
   修改 
  </button> 
  <button class="btn btn-danger btn-xs"> 
   <i class="fa fa-trash"></i> 
   删除 
  </button> 
 </td> 
</tr>

Vue.js仿Metronic高级表格(二)数据渲染

其指令含义为:遍历book_list对象,将元素赋值给book,索引赋值给key,并且使用元素渲染该tr标签
值得注意的是:
① 应该使用v-text来设置文本值,这样不会出现闪烁问题。
② Vue2.0中,不支持隐式的$index,需要显式声明,例如上述代码中"(book, key) in book_list",key可以看做$index
数据渲染完了,但是看效果会知道,价格、更新时间需要做一些格式调整。
Vue1.0中对于价格的调整可以使用

{{book.price | currency}} 

也就是过滤器,但在Vue2.0中,已废弃默认过滤器了,这意味着我们需要自定义过滤器,并且注册到Vue对象中去。
不难写出currencydate过滤器为:

Vue.filter('date', function (timestamp) { 
 let date = new Date(timestamp*1000); 
 let y = date.getFullYear(); 
 let month = date.getMonth()+1; 
 let d = date.getDate(); 
 let h = date.getHours(); 
 let m = date.getMinutes(); 
 let s = date.getSeconds(); 
 return y + '年'+ 
   (month < 10 ? '0':'') + month + '月' + 
   (d < 10 ? '0':'') + d + '日' + 
   (h < 10 ? '0':'') + h + ':' + 
   (m < 10 ? '0':'') + m + ':' + 
   (s < 10 ? '0':'') + s; 
}); 
Vue.filter('currency', function(money, unit, fixed){ 
 if (isNaN(money)) {return "";} 
 if (typeof fixed == 'undefined' || isNaN(fixed)) { 
  fixed = 2 
 } 
 if (typeof unit =='undefined') { 
  unit = '¥ '; 
 } 
 let num = parseFloat(money); 
 return unit + num.toFixed(fixed); 
});

再次修改tr模板为:

<td>{{book.price | currency}}</td> 
<td>{{book.time | date}}</td>

值得注意的是:过滤器不能和v-text指令配合使用,下述代码无法生效:

<td v-text="book.price | currency"></td> 
<td v-text="book.time | date"></td>

修改后的表格效果如下:

Vue.js仿Metronic高级表格(二)数据渲染

分页展示

分页其实就是只显示原始数据中,索引值在某一个范围内的数据,可以理解为是一种数据的过滤处理.
如果知道了页容量,当前页码,原始数据集,就能计算出当前页要显示哪些数据。
页码从1开始,那么第N页的数据,他的索引(从0开始)范围应该是:(N - 1)*SIZE ~ N*SIZE - 1
由于"分页"这一动作具有普遍性,我们现在methods中定义一个pageData方法:

methods: { 
 pageData: function (data, page_size, page_num) { 
  if (!(data instanceof Array)) {return [];} 
  let start = (page_num - 1)*page_size; 
  return data.slice(start, start + page_size); 
 } 
}

值得注意的是:slice方法返回的是数组的原始元素,而不是数组的备份(copy)。
"当前页的数据" 我们使用计算属性来完成,而不是方法:

computed : { 
 page_book_list: function() { 
  return this.pageData(this.book_list, this.page_size, this.page_num); 
 } 
}

值得注意的是:这里没什么值得好注意的。page_size、page_num是在data中定义的。
此时表格的数据集就得换成page_book_list了
<tr v-for="(book, key) in page_book_list"> 

页码

要渲染页码列表,必须先得到总页数,因为后期可能会增加关键字过滤,所以我们使用计算属性来得到总页数:
不足一页也要当一页来显示

computed : { 
 total_page: function () { 
  let len = this.book_list.length; 
  let ret = parseInt(len/this.page_size); 
  if ((len % this.page_size) != 0) { 
   ret++; 
  } 
  return ret < 1 ? 1 : ret;; 
 } 
}

页码列表的渲染使用v-for即可,参照bootstrap的页码html,不难写出:

<ul class="pagination"> 
 <li :class="{disabled:page_num<=1}" @click="prePage()"> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i>«</i></a></li> 
 <li v-for="n in total_page" :class="{active:page_num==n}"> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-text="n" @click="page_num=n"></a></li> 
 <li :class="{disabled:page_num >= total_page}" @click="nextPage()"> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i>»</i></a> 
 </li> 
</ul>

值得注意的是:

@click是绑定click事件,可以是函数执行,也可是是js代码执行
:class是绑定class属性,格式是"样式名称: 条件",当条件为true时,才设置这个样式。
此处为何不用v-show?因为效果太难看了

自定义页容量

这就很简单了,将页码下拉框改造一下即可,不难写出:

<select class="form-control" v-model="page_size"> 
 <option 
  v-for = "size in [5,10,15,20]" 
  :value = "size" 
  v-text = "size+'条'"> 
 </option> 
</select>

:value是绑定value的值
v-model会使得select的value与page_size绑定,这个绑定双向的

这里会出现一个小bug,即在切换页容量的时候,会导致总页数变化,有可能总页数会小于当前页。
于是在获取总页数的时候需要对当前页做一些变动:

total_page: function () { 
 let len = this.book_list.length; 
 let ret = parseInt(len/this.page_size); 
 if ((len % this.page_size) != 0) { 
  ret++; 
 } 
 if (this.page_num > ret) { 
  this.page_num = ret; 
 } else if (this.page_num < 1) { 
  this.page_num = 1; 
 } 
 return ret < 1 ? 1 : ret;; 
}

本次效果图:

Vue.js仿Metronic高级表格(二)数据渲染

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 Javascript
vue解决跨域问题(推荐)
Nov 10 Javascript
JavaScript实现前端分页控件
Apr 19 #Javascript
vue动态生成dom并且自动绑定事件
Apr 19 #Javascript
Vue响应式原理详解
Apr 18 #Javascript
详解vue-router基本使用
Apr 18 #Javascript
Vue键盘事件用法总结
Apr 18 #Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 #Javascript
jQuery加密密码到cookie的实现代码
Apr 18 #jQuery
You might like
3
2006/10/09 PHP
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
介绍一下linux的文件权限
2014/07/20 面试题
超市开店计划书
2014/04/26 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
学习十八大的心得体会
2014/09/12 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书