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 相关文章推荐
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 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
基于mysql的论坛(6)
2006/10/09 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
php实现微信企业转账功能
2018/10/02 PHP
PHP中的self关键字详解
2019/06/23 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
Display SQL Server Version Information
2007/06/21 Javascript
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
ext监听事件方法[初级篇]
2008/04/27 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
python使用minimax算法实现五子棋
2019/07/29 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
用python写测试数据文件过程解析
2019/09/25 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
css3学习心得分享
2013/08/19 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
女大学生毕业找工作的自我评价
2013/10/03 职场文书
大学生怎样进行自我评价
2013/12/07 职场文书
森林防火宣传标语
2014/06/27 职场文书
学雷锋的心得体会
2014/09/04 职场文书
观后感的写法
2015/06/19 职场文书