Vue.js Table Component Development example detailed _javascript skills

Objective

Component (Component) is one of the most powerful features of Vue.js. Components can extend HTML elements and encapsulate reusable code. At a higher level, the component is a custom element, and the Vue.js compiler adds special features to it. In some cases, a component can also be in the form of a native HTML element, which is extended in the IS attribute.

The basics of Component development

Components can extend HTML elements and encapsulate reusable code. I understand it as a template for functional modules.

For Vue, the component looks like this, and we write in HTML

<div id= "Example" > 
 <my-component></my-component>
</div>edx

And then you come out.

<div id= "Example" > 
<div>a custom component!</div>
</div>

Code <div>A custom component!</div> We just need to write it again.

So we need to define it and associate the my-component tag with the code, so we're going to define it

Define
var mycomponent = vue.extend ({
 Template: ' <div>a custom component!</div> '
})

Once defined, we want the page to be able to render it and let Vue know it exists.

Register
 vue.component (' my-component ', mycomponent)
//Create root instance
new Vue ({
 el: ' #example '
})

Above, is a very simple example of the official website, actually feel and a function package is similar, defined, introduced, and then executed.

Then a component can refer to something else, a bit like a function of mutual invocation.

var child = Vue.extend ({/* ... */})
var Parent = vue.extend ({
 Template: ' ... ',
 components: {
 //<my -component> can only be used within the parent component Template
 ' my-component ': Child
 }
}

An instance of a table component

This is an example of the official website

This is an example of a table that can be sorted. Let's start from scratch and make a table that can be sorted.

Basic structure

First it's divided into two parts, one is the search box, the other is the table itself, we can get this structure

<div id= "Demo" >
 <form id= "search" >
 search <input name= "Query" >
 </form>
<table>
 <thead>
 <tr>
 <th>name</th>
 <th>power</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>jack chan</td>
 <td>7000</td>
 </tr>
 </tbody>
</table>
</div>

Display effects

Plus the basic CSS

Body {
 Font-family:helvetica neue, Arial, Sans-serif;
 font-size:14px;
 Color: #444;
}

Table {
 border:2px solid #42b983;
 border-radius:3px;
 Background-color: #fff;
}

th {
 background-color: #42b983;
 Color:rgba (255,255,255,0.66);
 Cursor:pointer;
 -webkit-user-select:none;
 -moz-user-select:none;
 -user-select:none;
}

TD {
 Background-color: #f9f9f9;
}

Th, TD {
 min-width:120px;
 padding:10px 20px;
}

#search {
 margin-bottom:10px;
}

The display effect is as follows

Extract components

We want to make the table a separate component, so we define a component called Demo-grid, and use it to generate tables

<div id= "Demo" >
 <form id= "search" >
 search <input name= "Query" >
 </form>
 <demo-grid>
 </demo-grid>
</div>

The part of the code about the table is put into the component template, we define the component. Which is defined by the script,

<script type= "Text/x-template" id= "grid-template" >
 <table>
 <thead>
 <tr>
  <th>name</th>
  <th>power</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>jack chan</td>
  <td>7000</td>
 </tr>
 </ tbody>
 </table>
</script>

After the definition, we're going to register the module with the Vue and then make the Vue rendering.

 Vue.component (' Demo-grid ', {
 Template: "#grid-template",
 });

 var demo = new Vue ({
 el: ' #demo '
 })

Then the final effect is the same, and there is no data flow at this time.

Component Data Flow

We want the table to know the header of the table and the contents of the table, that is, there is a gridcolumns and Griddata, which was first placed in Vue's data.

 Bootstrap the demo
 var demo = new Vue ({
 el: ' #demo ',
 data: {
  gridcolumns: [' name ', ' Power '],
  Gridd ATA: [
  {name: ' Chuck Norris ', power:infinity},
  {name: ' Bruce Lee ', power:9000},
  {name: ' Jackie Chan ', p ower:7000},
  {name: ' Jet Li ', power:8000}
  ]
 }
 

Then our component also accepts this data, where we pass the data to the component template in the form of a similar attribute,

<demo-grid
  :d ata= "Griddata"
  : columns= "Gridcolumns" >
 </demo-grid>

Then we inherit the corresponding data in the component.

 Vue.component (' Demo-grid ', {
 Template: "#grid-template",
 props: {
  Data:array,
  Columns:array
 }
 });

and replace it in the template.

<script type= "Text/x-template" id= "grid-template" >
 <table>
 <thead>
 <tr>
  <th v-for= "key in columns" >{{key}}</th>
 </tr>
 </thead>
 <tbody>
 < TR v-for= "entry in Data" >
  <td v-for= "key in columns" >{{entry[key]}}</td>
 </tr>
 </tbody>
 </table>
</script>

The effect is as follows

Search function increased

This time, we want to add an interaction, that is, when the search box to add keywords, the table can be changed accordingly.

First we want to bind the model of the search box, which is to bind input with SearchQuery.

 <form id= "Search" >
 search <input name= "query" v-model= "SearchQuery" >
 </form>

Increase the initialization of data inside the Vue

 var demo = new Vue ({
 el: ' #demo ',
 data: {
  searchquery: ",
  ...
 })

Also, parameters are passed in the component template

 <demo-grid
  :d ata= "Griddata"
  : columns= "Gridcolumns"
  : filter-key= "SearchQuery" >
 </ Demo-grid>

The definition of the component to inherit the template's data, that is, in the template is Filter-key, pay attention to transform hump writing

 Vue.component (' Demo-grid ', {
 template: ' #grid-template ',
 props: {
  Data:array, Columns:array
  ,
  filterkey:string
 }
})

This time, our template inside to filter filterkey data, here is used filter, Vue provides a filter called Filterby. | with filters, first for the name of the filter, the back is the parameter, | Filterby Filterkey uses the Filterby filter, the parameter is Filterkey

<tr v-for= '
 entry in Data
 | Filterby filterkey> <td v-for=
  ' key in columns ' >
  {{entry[ Key]}
  </td>
 </tr>

The effect is as follows, so we have a table that can be filtered.

Table sort

This part of the logic is a little bit more complicated than the front. First we add a triangle to the table, there are two kinds of triangles, one is positive sequence, the other is reverse, we use span as the container of the triangle.

  <th v-for= "key in columns"
  @click = "sortby (key)"
  : class= "{Active:sortkey = = key}" >
  {key | Capitalize}}
  <span class= "Arrow" >
  </span>
  </th>

The style of the triangle has two kinds, rising and falling

. arrow {
 display:inline-block;
 Vertical-align:middle;
 width:0;
 height:0;
 margin-left:5px;
 opacity:0.66
}

. ARROW.ASC {
 border-left:4px solid transparent;
 border-right:4px solid transparent;
 border-bottom:4px solid #fff;

ARROW.DSC {
 border-left:4px solid transparent;
 border-right:4px solid transparent;
 border-top:4px solid #fff;
}

The effect of DSC is as follows

We want to be able to switch in different states, so we choose to have the status information of data store in the component, use a Sortorders object to store sort information, and use a sortkey to represent the key that is currently used to sort, we set to name

 Register the grid component
 vue.component (' Demo-grid ', {
 template: ' #grid-template ',
 ...
 Data:function () {
  var sortorders = {}
  This.columns.forEach (function (key) {
  Sortorders[key] = 1
  }) Return
  {
  sortKey: ' name ',
  sortorders:sortorders
  }
 }

Then use orderBy to sort

 <tbody>
 <tr v-for= "
 entry in Data
 | Filterby filterkey
 | by SortKey sortorders[ SortKey] ">
  <td v-for=" key in Columns >
  {{entry[key]}}
  </td>
 </tr>
 </tbody>

Now it's sorted by name ascending, so we see the result of the table as follows

Increase interaction

We want to be able to automatically ascending descending by clicking on the table Head, so add the mouse event, and then associate the span style with sortOrders[key] the values to increase the active style.

<th v-for= "key in columns"
  @click = "sortby (key)"
  : class= "{Active:sortkey = = key}" >
  {key | Capitalize}}
 <span class= "Arrow"
  : class= "Sortorders[key] > 0?" ' ASC ': ' DSC ' ' >
 </span>
 </th>

The associated active styles are as follows

Th.active. Arrow {
 opacity:1
}

For mouse events, we define the interior of the table, which is to position the sortkey to the current active element while changing sortOrders[key] the value

 Register the grid component
 vue.component (' Demo-grid ', {
 template: ' #grid-template ',
 props: {
  ...
 },
 data:function () {
 ...
 },
 methods: {
  sortby:function (key) {
  This.sortkey = Key
  This.sortorders[key] = this.sortorders[key] *-1
  }}}
 );

Summarize

The above is about Vue.js component development of the entire content, I hope this article for everyone to learn or use vue.js can have some help, if you have questions you can message exchange.