Vue.js仿Metronic高级表格（二）数据渲染
|
上篇使用介绍了需求、原型设计以及静态页面实现，这篇讲解如何使用Vue渲染数据，实现动态展示。 表格数据先定义一个数组来保存所有数据： 使用 v-for指令来渲染，将tr标签改写成：
修改
其指令含义为：遍历 book_list对象，将元素赋值给book，索引赋值给key，并且使用元素渲染该tr标签 值得注意的是： ① 应该使用v-text来设置文本值，这样不会出现闪烁问题。 ② Vue2.0中，不支持隐式的$index，需要显式声明，例如上述代码中"(book,key) in book_list"，key可以看做$index 数据渲染完了，但是看效果会知道，价格、更新时间需要做一些格式调整。 Vue1.0中对于价格的调整可以使用
也就是过滤器，但在Vue2.0中，已废弃默认过滤器了，这意味着我们需要自定义过滤器，并且注册到Vue对象中去。
不难写出 再次修改tr模板为： 值得注意的是：过滤器不能和v-text指令配合使用，下述代码无法生效： 修改后的表格效果如下：
分页展示分页其实就是只显示原始数据中，索引值在某一个范围内的数据，可以理解为是一种数据的过滤处理. 如果知道了页容量，当前页码，原始数据集，就能计算出当前页要显示哪些数据。 页码从1开始，那么第N页的数据，他的索引(从0开始)范围应该是：(N - 1)*SIZE ~ N*SIZE - 1 由于"分页"这一动作具有普遍性，我们现在methods中定义一个 pageData方法：值得注意的是： slice方法返回的是数组的原始元素，而不是数组的备份（copy）。 "当前页的数据" 我们使用计算属性来完成，而不是方法：值得注意的是：这里没什么值得好注意的。page_size、page_num是在data中定义的。
此时表格的数据集就得换成page_book_list了
要渲染页码列表，必须先得到总页数，因为后期可能会增加关键字过滤，所以我们使用计算属性来得到总页数： 不足一页也要当一页来显示 页码列表的渲染使用v-for即可，参照bootstrap的页码html，不难写出： «
值得注意的是： ① @click是绑定click事件，可以是函数执行，也可是是js代码执行 ②:class是绑定class属性，格式是"样式名称: 条件"，当条件为true时，才设置这个样式。 此处为何不用v-show？因为效果太难看了自定义页容量这就很简单了，将页码下拉框改造一下即可，不难写出： ① :value是绑定value的值 ②v-model会使得select的value与page_size绑定，这个绑定双向的这里会出现一个小bug，即在切换页容量的时候，会导致总页数变化，有可能总页数会小于当前页。 于是在获取总页数的时候需要对当前页做一些变动： ret) {
this.page_num = ret;
} else if (this.page_num < 1) {
this.page_num = 1;
}
return ret < 1 ? 1 : ret;;
}
本次效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
