vue.js表格組件開發(fā)的實例詳解

更新時間：2016年10月12日 11:56:58 作者：進擊的前端

Vue.js通過簡潔的API提供高效的數(shù)據綁定和靈活的組件系統(tǒng)。在前端紛繁復雜的生態(tài)中，Vue.js有幸受到一定程度的關注，所以本文將從各方面對Vue.js的組件開發(fā)做一個深入介紹。有需要的朋友們可以參考借鑒。

前言

組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴展。

組件開發(fā)的基礎

組件可以擴展 HTML 元素，封裝可重用的代碼。我理解為功能模塊的模板吧。

對于vue來說，組件是這個樣子的，我們在html里面寫

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

然后就出來

<div id="example"> 
<div>A custom component!</div>
</div>

代碼 <div>A custom component!</div>我們只要寫一遍就行了。

所以我們需要定義它，把 my-component的標簽和代碼關聯(lián)起來，所以我們要定義它

// 定義
var MyComponent = Vue.extend({
 template: '<div>A custom component!</div>'
})

定義了之后，我們要讓頁面能夠渲染它，讓Vue知道它的存在

// 注冊
 Vue.component('my-component', MyComponent)
// 創(chuàng)建根實例
new Vue({
 el: '#example'
})

以上，是官網一個非常簡單的例子，其實覺得和一個function的封裝也差不多，定義，引入，然后執(zhí)行。

然后一個組件可以引用別的組件的東西，有點像函數(shù)的互相調用啊。

var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
 template: '...',
 components: {
 // <my-component> 只能用在父組件模板內
 'my-component': Child
 }
})

一個表格組件的實例

這是官網的例子

這個是一個可以排序的表格的例子。我們從頭開始來制作一個可以排序的表格。

基本結構

首先分成兩個部分，一個是搜索框，一個是表格本身，我們可以得到這樣的結構

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

顯示效果

加上基本的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;
}

顯示效果如下，

提取組件

我們是想要讓表格成為單獨的組件，所以我們定義一個叫做 demo-grid的組件，用它來生成表格

<div id="demo">
 <form id="search">
 Search <input name="query" >
 </form>
 <demo-grid>
 </demo-grid>
</div>

代碼里面關于表格的那部分給放到組件模板里面，我們定義組件。也就是用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>

定義完了之后我們要在給Vue注冊組件模塊，然后進行Vue的渲染

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

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

然后最后的效果是一樣的，這個時候并沒有數(shù)據流。

組件數(shù)據流

我們要讓表格知道表格的頭部和表格的內容，也就是有一個gridColumns和gridData，這個數(shù)據最開始放在Vue的Data里面

 // bootstrap the demo
 var demo = new Vue({
 el: '#demo',
 data: {
  gridColumns: ['name', 'power'],
  gridData: [
  { name: 'Chuck Norris', power: Infinity },
  { name: 'Bruce Lee', power: 9000 },
  { name: 'Jackie Chan', power: 7000 },
  { name: 'Jet Li', power: 8000 }
  ]
 }
 })

然后我們的組件也要接受這個數(shù)據,這里我們通過類似屬性的形式給組件模板傳入數(shù)據，

<demo-grid
  :data="gridData"
  :columns="gridColumns">
 </demo-grid>

然后我們在組件里面把相應的數(shù)據繼承下來。

 Vue.component('demo-grid',{
 template:"#grid-template",
 props: {
  data: Array,
  columns: Array
 }
 });

然后在模板里面替換掉

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

效果如下

搜索功能增加

這個時候，我們想加入一個交互，也就是在搜索框增加關鍵詞的時候，表格能夠相應地變化。

首先我們要綁定搜索框的模型,也就是用searchQuery來綁定Input

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

在Vue里面增加data的初始化

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

同時，在組件模板里面也進行參數(shù)傳入

 <demo-grid
  :data="gridData"
  :columns="gridColumns"
  :filter-key="searchQuery">
 </demo-grid>

組件的定義里面要繼承模板的數(shù)據,也就是在模板里面是filter-key，注意要轉化駝峰寫法

 Vue.component('demo-grid', {
 template: '#grid-template',
 props: {
  data: Array,
  columns: Array,
  filterKey: String
 }
})

這個時候，我們的模板里面要過濾符合filterKey的數(shù)據,這里就用到了過濾器，vue提供了一個叫做filterBy的過濾器。|與過濾器，第一個為過濾器的名字，后面的是參數(shù)，| filterBy filterKey使用的就是filterBy的過濾器，參數(shù)是filterKey

<tr v-for="
 entry in data
 | filterBy filterKey>
  <td v-for="key in columns">
  {{entry[key]}}
  </td>
 </tr>

效果如下，我們這樣就有了一個能夠過濾的表格

表格排序

這部分邏輯比前面稍微復雜一點點。首先我們給表格加一個三角形，三角形有兩種，一種是正序的，一種是逆序的，我們用span來作為三角形的容器

  <th v-for="key in columns"
  @click="sortBy(key)"
  :class="{active: sortKey == key}">
  {{key | capitalize}}
  <span class="arrow">
  </span>
  </th>

三角形的樣式有兩種，上升的和下降的

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

dsc的效果如下

我們希望能夠在不同的狀態(tài)里面切換，所以我們選擇在組件里面有數(shù)據存儲排序的狀態(tài)信息，用一個sortOrders的對象來存儲排序信息，同時用一個sortKey來表示當前用來排序的鍵，我們設置為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
  }
 }

然后使用orderBy來排序

 <tbody>
 <tr v-for="
 entry in data
 | filterBy filterKey
 | orderBy sortKey sortOrders[sortKey]">
  <td v-for="key in columns">
  {{entry[key]}}
  </td>
 </tr>
 </tbody>

現(xiàn)在也就是根據name升序排序，所以我們看到表格的結果如下

增加交互

我們希望能夠通過點擊表格頭部來自動升序降序,所以添加鼠標事件，另外把span的樣式和sortOrders[key]的值相關聯(lián),增加active的樣式

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

相關active的樣式如下

th.active .arrow {
 opacity: 1;
}

對于鼠標事件，我們定義在表格內部，也就是把sortKey定位當前活躍的元素，同時改變sortOrders[key]的值

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

總結

以上就是關于vue.js組件開發(fā)的全部內容了，希望這篇文章對大家學習或者使用vue.js能有一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章:

淺談vue中使用編輯器vue-quill-editor踩過的坑
這篇文章主要介紹了淺談vue中使用編輯器vue-quill-editor踩過的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue實現(xiàn)拖拽或點擊上傳圖片
這篇文章主要為大家詳細介紹了vue實現(xiàn)拖拽或點擊上傳圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue提供的三種調試方式你知道嗎
這篇文章主要為大家介紹了Vue提供的三種調試方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-01-01
vue3的api解讀之ref和reactive示例詳解
這篇文章主要介紹了vue3的api解讀之ref和reactive詳解，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-05-05
vue pages 多入口項目 + chainWebpack 全局引用縮寫說明
這篇文章主要介紹了vue pages 多入口項目 + chainWebpack 全局引用縮寫說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue項目中使用vue-i18n報錯的解決方法
這篇文章主要給大家介紹了關于vue項目中使用vue-i18n報錯的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-01-01
VUE v-bind 數(shù)據綁定的示例詳解
這篇文章主要介紹了VUE v-bind 數(shù)據綁定,簡單點來說就是對 HTML 中的元素，我們可以使用 v-bind 來進行綁定和動態(tài)的數(shù)據輸出，本文結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2023-05-05
$解決VUE-npm ERR! C:\rj\node-v14.4.0-win-x64\nod問題$
解決VUE-npm ERR! C:\rj\node-v14.4.0-win-x64\nod問題
這篇文章主要介紹了解決VUE-npm ERR! C:\rj\node-v14.4.0-win-x64\nod問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-04-04
解決vue3中使用echart報錯:Cannot read properties of&n
在Vue項目中使用Echarts進行數(shù)據可視化是非常常見的需求,然而有時候在引入Echarts的過程中可能會遇到報錯,本文主要介紹了解決vue3中使用echart報錯:Cannot read properties of undefined (reading ‘type‘),感興趣的可以了解一下
2024-01-01
Vue實現(xiàn)文本編譯詳情
這篇文章主要介紹了Vue實現(xiàn)文本編譯詳情，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下，希望對你的學習有所幫助
2022-08-08