Vue.js仿Metronic高級表格（二）數(shù)據(jù)渲染

上篇使用Vue.js制作仿Metronic高級表格（一）靜態(tài)設(shè)計(jì)介紹了需求、原型設(shè)計(jì)以及靜態(tài)頁面實(shí)現(xiàn)，這篇講解如何使用Vue渲染數(shù)據(jù)，實(shí)現(xiàn)動態(tài)展示。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),五家渠企業(yè)網(wǎng)站建設(shè),五家渠品牌網(wǎng)站建設(shè),網(wǎng)站定制,五家渠網(wǎng)站建設(shè)報(bào)價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,五家渠網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

表格數(shù)據(jù)

先定義一個數(shù)組來保存所有數(shù)據(jù)：

var vm = new Vue({ 
 el:'#content', 
 data: { 
  book_list: [ 
   {id:1, name:"標(biāo)準(zhǔn)日本語", 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ù)時代", 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é)英語", type: "文化", price:59.00, time: 1492502443}, 
  ] 
 } 
});

使用v-for指令來渲染，將tr標(biāo)簽改寫成：

Vue.js仿Metronic高級表格（二）數(shù)據(jù)渲染

其指令含義為：遍歷book_list對象，將元素賦值給book，索引賦值給key，并且使用元素渲染該tr標(biāo)簽
值得注意的是：
① 應(yīng)該使用v-text來設(shè)置文本值，這樣不會出現(xiàn)閃爍問題。
② Vue2.0中，不支持隱式的$index，需要顯式聲明，例如上述代碼中"(book, key) in book_list"，key可以看做$index
數(shù)據(jù)渲染完了，但是看效果會知道，價格、更新時間需要做一些格式調(diào)整。
Vue1.0中對于價格的調(diào)整可以使用

也就是過濾器，但在Vue2.0中，已廢棄默認(rèn)過濾器了，這意味著我們需要自定義過濾器，并且注冊到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模板為：

{{book.price | currency}} 
{{book.time | date}}

值得注意的是：過濾器不能和v-text指令配合使用，下述代碼無法生效：

修改后的表格效果如下：

Vue.js仿Metronic高級表格（二）數(shù)據(jù)渲染

分頁展示

分頁其實(shí)就是只顯示原始數(shù)據(jù)中，索引值在某一個范圍內(nèi)的數(shù)據(jù)，可以理解為是一種數(shù)據(jù)的過濾處理.
如果知道了頁容量，當(dāng)前頁碼，原始數(shù)據(jù)集，就能計(jì)算出當(dāng)前頁要顯示哪些數(shù)據(jù)。
頁碼從1開始，那么第N頁的數(shù)據(jù)，他的索引(從0開始)范圍應(yīng)該是：(N - 1)*SIZE ~ N*SIZE - 1
由于"分頁"這一動作具有普遍性，我們現(xiàn)在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方法返回的是數(shù)組的原始元素，而不是數(shù)組的備份（copy）。
"當(dāng)前頁的數(shù)據(jù)" 我們使用計(jì)算屬性來完成，而不是方法：

computed : { 
 page_book_list: function() { 
  return this.pageData(this.book_list, this.page_size, this.page_num); 
 } 
}

值得注意的是：這里沒什么值得好注意的。page_size、page_num是在data中定義的。
此時表格的數(shù)據(jù)集就得換成page_book_list了

頁碼

要渲染頁碼列表，必須先得到總頁數(shù)，因?yàn)楹笃诳赡軙黾雨P(guān)鍵字過濾，所以我們使用計(jì)算屬性來得到總頁數(shù)：
不足一頁也要當(dāng)一頁來顯示

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，不難寫出：

值得注意的是：

① @click是綁定click事件，可以是函數(shù)執(zhí)行，也可是是js代碼執(zhí)行
② :class是綁定class屬性，格式是"樣式名稱: 條件"，當(dāng)條件為true時，才設(shè)置這個樣式。
此處為何不用v-show？因?yàn)樾Чy看了

自定義頁容量

這就很簡單了，將頁碼下拉框改造一下即可，不難寫出：

① :value是綁定value的值
② v-model會使得select的value與page_size綁定，這個綁定雙向的

這里會出現(xiàn)一個小bug，即在切換頁容量的時候，會導(dǎo)致總頁數(shù)變化，有可能總頁數(shù)會小于當(dāng)前頁。
于是在獲取總頁數(shù)的時候需要對當(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;; 
}

本次效果圖：

Vue.js仿Metronic高級表格（二）數(shù)據(jù)渲染

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站題目：Vue.js仿Metronic高級表格（二）數(shù)據(jù)渲染
網(wǎng)站路徑：http://m.br277.com/article/jpohce.html

網(wǎng)站建設(shè)資訊

Vue.js仿Metronic高級表格（二）數(shù)據(jù)渲染

其他資訊