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

作者:TinyJian 时间:2024-04-10 10:32:45 

上篇使用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 = '&yen; ';
}
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>&laquo;</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>&raquo;</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,Metronic,表格
0
投稿

猜你喜欢

  • 使用python-opencv读取视频,计算视频总帧数及FPS的实现

    2022-02-03 06:55:34
  • 利用python实现数据分析

    2023-01-05 22:07:27
  • JavaScript经典效果集锦

    2013-08-13 09:29:34
  • Pandas如何将表格的前几行生成html实战案例

    2021-06-05 12:01:27
  • javascript中使用replaceAll()函数实现字符替换的方法

    2024-04-10 16:18:47
  • Python数据分析之Python和Selenium爬取BOSS直聘岗位

    2021-04-27 08:53:19
  • python得到一个excel的全部sheet标签值方法

    2022-11-22 15:27:51
  • 高效率的GetRows()的使用方法

    2008-09-23 18:29:00
  • 如何安全地关闭MySQL

    2024-01-13 04:11:03
  • pip search报错问题及解决

    2022-12-20 23:33:12
  • python处理json数据中的中文

    2021-10-02 07:11:10
  • 基于PHP+Ajax实现表单验证的详解

    2023-11-14 12:52:43
  • ASP UTF-8页面乱码+GB2312转UTF-8 +生成UTF-8格式的文件(编码)

    2011-04-19 11:15:00
  • 关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法

    2024-04-29 13:14:31
  • Python 在字符串中加入变量的实例讲解

    2023-01-27 10:51:21
  • C#调用Python模块的方法

    2021-04-13 15:29:10
  • django为Form生成的label标签添加class方式

    2022-08-13 12:01:44
  • 基于javascript实现表格的简单操作

    2024-04-30 08:55:24
  • Python实现的多项式拟合功能示例【基于matplotlib】

    2022-02-18 14:44:08
  • ORCLE 表中列的修改

    2009-07-28 10:42:00
  • asp之家 网络编程 m.aspxhome.com