您好,登錄后才能下訂單哦!
上篇使用Vue.js制作仿Metronic高級(jí)表格(一)靜態(tài)設(shè)計(jì)介紹了需求、原型設(shè)計(jì)以及靜態(tài)頁(yè)面實(shí)現(xiàn),這篇講解如何使用Vue渲染數(shù)據(jù),實(shí)現(xiàn)動(dòng)態(tài)展示。
表格數(shù)據(jù)
先定義一個(gè)數(shù)組來(lái)保存所有數(shù)據(jù):
var vm = new Vue({ el:'#content', data: { book_list: [ {id:1, name:"標(biāo)準(zhǔn)日本語(yǔ)", type: "文化", price:19.00, time: 1492502043}, {id:2, name:"微觀經(jīng)濟(jì)學(xué)", type: "經(jīng)濟(jì)", price:29.00, time: 1492502143}, {id:3, name:"大數(shù)據(jù)時(shí)代", type: "經(jīng)濟(jì)", price:39.00, time: 1492502243}, {id:4, name:"TCP/IP協(xié)議詳解", type: "科技", price:49.00, time: 1492502343}, {id:5, name:"大學(xué)英語(yǔ)", type: "文化", price:59.00, time: 1492502443}, ] } });
使用v-for指令來(lái)渲染,將tr標(biāo)簽改寫(xiě)成:
<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對(duì)象,將元素賦值給book,索引賦值給key,并且使用元素渲染該tr標(biāo)簽
值得注意的是:
① 應(yīng)該使用v-text來(lái)設(shè)置文本值,這樣不會(huì)出現(xiàn)閃爍問(wèn)題。
② Vue2.0中,不支持隱式的$index,需要顯式聲明,例如上述代碼中"(book, key) in book_list",key可以看做$index
數(shù)據(jù)渲染完了,但是看效果會(huì)知道,價(jià)格、更新時(shí)間需要做一些格式調(diào)整。
Vue1.0中對(duì)于價(jià)格的調(diào)整可以使用
{{book.price | currency}}
也就是過(guò)濾器,但在Vue2.0中,已廢棄默認(rèn)過(guò)濾器了,這意味著我們需要自定義過(guò)濾器,并且注冊(cè)到Vue對(duì)象中去。
不難寫(xiě)出currency和date過(guò)濾器為:
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>
值得注意的是:過(guò)濾器不能和v-text指令配合使用,下述代碼無(wú)法生效:
<td v-text="book.price | currency"></td> <td v-text="book.time | date"></td>
修改后的表格效果如下:
分頁(yè)展示
分頁(yè)其實(shí)就是只顯示原始數(shù)據(jù)中,索引值在某一個(gè)范圍內(nèi)的數(shù)據(jù),可以理解為是一種數(shù)據(jù)的過(guò)濾處理.
如果知道了頁(yè)容量,當(dāng)前頁(yè)碼,原始數(shù)據(jù)集,就能計(jì)算出當(dāng)前頁(yè)要顯示哪些數(shù)據(jù)。
頁(yè)碼從1開(kāi)始,那么第N頁(yè)的數(shù)據(jù),他的索引(從0開(kāi)始)范圍應(yīng)該是:(N - 1)*SIZE ~ N*SIZE - 1
由于"分頁(yè)"這一動(dòng)作具有普遍性,我們現(xiàn)在methods中定義一個(gè)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方法返回的是數(shù)組的原始元素,而不是數(shù)組的備份(copy)。
"當(dāng)前頁(yè)的數(shù)據(jù)" 我們使用計(jì)算屬性來(lái)完成,而不是方法:
computed : { page_book_list: function() { return this.pageData(this.book_list, this.page_size, this.page_num); } }
值得注意的是:這里沒(méi)什么值得好注意的。page_size、page_num是在data中定義的。
此時(shí)表格的數(shù)據(jù)集就得換成page_book_list了
<tr v-for="(book, key) in page_book_list">
頁(yè)碼
要渲染頁(yè)碼列表,必須先得到總頁(yè)數(shù),因?yàn)楹笃诳赡軙?huì)增加關(guān)鍵字過(guò)濾,所以我們使用計(jì)算屬性來(lái)得到總頁(yè)數(shù):
不足一頁(yè)也要當(dāng)一頁(yè)來(lái)顯示
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;; } }
頁(yè)碼列表的渲染使用v-for即可,參照bootstrap的頁(yè)碼html,不難寫(xiě)出:
<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事件,可以是函數(shù)執(zhí)行,也可是是js代碼執(zhí)行
② :class是綁定class屬性,格式是"樣式名稱: 條件",當(dāng)條件為true時(shí),才設(shè)置這個(gè)樣式。
此處為何不用v-show?因?yàn)樾Чy看了
自定義頁(yè)容量
這就很簡(jiǎn)單了,將頁(yè)碼下拉框改造一下即可,不難寫(xiě)出:
<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會(huì)使得select的value與page_size綁定,這個(gè)綁定雙向的
這里會(huì)出現(xiàn)一個(gè)小bug,即在切換頁(yè)容量的時(shí)候,會(huì)導(dǎo)致總頁(yè)數(shù)變化,有可能總頁(yè)數(shù)會(huì)小于當(dāng)前頁(yè)。
于是在獲取總頁(yè)數(shù)的時(shí)候需要對(duì)當(dāng)前頁(yè)做一些變動(dòng):
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;; }
本次效果圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。