Vue.js仿Metronic高级表格（二）数据渲染

上篇使用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> 

其指令含义为：遍历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对象中去。
不难写出currency和date过滤器为：

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> 

修改后的表格效果如下：

分页展示

分页其实就是只显示原始数据中，索引值在某一个范围内的数据，可以理解为是一种数据的过滤处理.
如果知道了页容量，当前页码，原始数据集，就能计算出当前页要显示哪些数据。
页码从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  # 表格  # vue.js实现条件渲染的实例代码  # Vue.js学习教程之列表渲染详解  # 用v-html解决Vue.js渲染中html标签不被解析的问题  # 学习vue.js条件渲染  # Vue.JS入门教程之列表渲染  # Vue.js实现多条件筛选、搜索、排序及分页的表格功能  # vue.js声明式渲染和条件与循环基础知识  # 的是  # 绑定  # 分页  # 是在  # 当前页  # 自定义  # 日本语  # 而不是  # 原始数据  # 这一  # 是一种  # 更新时间  # 看了  # 就能  # 有可能  # 遍历  # 但在  # 这就  # 很简单  # 只显示 

相关文章： 建站之星代理商如何保障技术支持与售后服务？  Python如何创建带属性的XML节点  相亲简历制作网站推荐大全,新相亲大会主持人小萍萍资料？  如何快速生成专业多端适配建站电话？  重庆市网站制作公司,重庆招聘网站哪个好？  如何用景安虚拟主机手机版绑定域名建站？  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  小型网站制作HTML,*游戏网站怎么搭建？  如何在阿里云虚拟服务器快速搭建网站？  建站主机服务器选型指南与性能优化方案解析  如何彻底卸载建站之星软件？  深圳网站制作的公司有哪些,dido官方网站？  公司网站建设制作费用,想建设一个属于自己的企业网站，该如何去做？  网站建设制作、微信公众号,公明人民医院怎么在网上预约？  交易网站制作流程,我想开通一个网站，注册一个交易网址，需要那些手续？  专业的网站制作设计是什么,如何制作一个企业网站，建设网站的基本步骤有哪些？  公司网站设计制作厂家,怎么创建自己的一个网站？  如何通过多用户协作模板快速搭建高效企业网站？  宝塔建站助手安装配置与建站模板使用全流程解析  如何构建满足综合性能需求的优质建站方案？  如何通过智能用户系统一键生成高效建站方案？  高性价比服务器租赁——企业级配置与24小时运维服务  个人摄影网站制作流程,摄影爱好者都去什么网站？  css网站制作参考文献有哪些,易聊怎么注册？  如何选择适配移动端的WAP自助建站平台？  如何高效完成独享虚拟主机建站？  名字制作网站免费,所有小说网站的名字？  网站制作的步骤包括,正确网址格式怎么写？  用v-html解决Vue.js渲染中html标签不被解析的问题  建站之星各版本价格是多少？  ,怎么用自己头像做动态表情包？  如何在IIS服务器上快速部署高效网站？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  建站VPS选购需注意哪些关键参数？  如何在阿里云通过域名搭建网站？  如何在服务器上配置二级域名建站？  香港服务器租用每月最低只需15元？  建站主机选购指南与交易推荐：核心配置解析  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  linux top下的 minerd 木马清除方法  宁波免费建站如何选择可靠模板与平台？  高防服务器租用如何选择配置与防御等级？  免费制作小说封面的网站有哪些,怎么接网站批量的封面单？  天津个人网站制作公司,天津网约车驾驶员从业资格证官网？  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  Thinkphp 中 distinct 的用法解析  ,想在网上投简历，哪几个网站比较好？  网站制作难吗安全吗,做一个网站需要多久时间？  如何在云主机快速搭建网站站点？  成都网站制作公司哪家好,四川省职工服务网是做什么用？