Vue. js imitation Metronic Advanced Table (2) Data Rendering, vue. jsmetronic

Vue. js imitation Metronic Advanced Table (2) Data Rendering, vue. jsmetronic

The previous article used Vue. js to create a Metronic-like Advanced Table (I). The static design introduced the requirements, prototype design, and static page implementation. This article explains how to use Vue to render data for dynamic display.

Table Data

Define an array to save all data:

Var vm = new Vue ({el: '# content', data: {book_list: [{id: 1, name: "standard Japanese", type: "culture", price: 19.00, time: 1492502043 },{ id: 2, name: "micro-Economics", type: "economic", price: 29.00, time: 1492502143 },{ id: 3, name: "Big Data Era", type: "economic", price: 39.00, time: 1492502243}, {id: 4, name: "TCP/IP protocol details", type: "technology", price: 49.00, time: 1492502343}, {id: 5, name: "", type: "culture", price: 59.00, time: 1492502443},]});

UseV-Command to render and rewrite the tr tag:

<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> <button class =" btn-info btn-xs "> <I class =" fa-pencel "> </I> modify </button> <button class = "btn-danger btn-xs"> <I class = "fa-trash"> </I> Delete </button> </ td> </tr>

Its command meaning is: TraversalBook_listObject, assign the elementBook, The index is assignedKeyAnd use the element to render the tr tag.
It is worth noting that:
① Should be usedV-textTo set the text value.
② In Vue2.0, implicit $ index is not supported and must be explicitly declared. For example, in the above Code, "(book, key) in book_list", the key can be viewed as $ index.
After the data is rendered, you can see the effect. You need to adjust the price and update time.
You can use Vue1.0 to adjust the price.

{Book. price | currency }}

That is, the filter, but in Vue2.0, the default filter has been discarded, which means we need to customize the filter and register it in the Vue object.
Not hard to writeCurrencyAndDateThe filter is:

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 + 'Year' + (month <10? '0': '') + month + 'month' + (d <10? '0': '') + d + 'day' + (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 );});

Modify the tr template as follows:

<td>{{book.price | currency}}</td> <td>{{book.time | date}}</td> 

It is worth noting that the filter cannot be used with the v-text command, and the following code cannot take effect:

<td v-text="book.price | currency"></td> <td v-text="book.time | date"></td> 

The modified table is as follows:

Display by PAGE

In fact, only the original data is displayed on pages, and the index value is within a certain range of data. It can be understood as a data filtering process.
If you know the page capacity, current page number, and original dataset, you can calculate the data to be displayed on the current page.
The page number starts from 1, so the index range of page N (starting from 0) should be (N-1) * SIZE ~ N * SIZE-1
Because the "Paging" action is universal, we now definePageDataMethod:

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);  } } 

It is worth noting that:SliceThe method returns the original elements of the array, rather than the copy of the array ).
"Data on the current page" is completed using calculation attributes, rather than methods:

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

It is worth noting that there is nothing worth noting here. Page_size and page_num are defined in data.
In this case, the dataset in the table must be changed to page_book_list.
<Tr v-for = "(book, key) in page_book_list">

Page number

To render the page list, you must first obtain the total number of pages, because keyword filtering may be added later, so we use the calculation attribute to obtain the total number of pages:
When there is not one page, it should be displayed as one page.

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;;  } } 

You can use v-for to render the page number list. Refer to the page number html of bootstrap and it is not difficult to write it out:

<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> 

It is worth noting that:

①@ ClickIs to bind the click event, which can be function execution or js code execution.
②: ClassIs bound to the class attribute. The format is "style name: condition". This style is set only when the condition is true.
Why not use v-show? Because the effect is too ugly

Custom page capacity

This is very simple. You can modify the page number drop-down box and it is not difficult to write it out:

<Select class = "form-control" v-model = "page_size"> <option v-for = "size in [5, 10, 15, 20]": value = "size" v-text = "size + 'barri'"> </option> </select>

①: ValueIs the value bound to the value
②V-modelMake the select value andPage_sizeBIND.

A small bug occurs here, that is, when switching the page capacity, the total number of pages may change, and the total number of pages may be smaller than the current page.
Therefore, when obtaining the total number of pages, you need to make some changes to the current page:

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;; } 

This time:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.