<script type="text/x-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> Search <input v-model="searchQuery"> </form>
在Vue里面增加data的初始化
var demo = new Vue({ el: '#demo', data: { searchQuery: '', ... })
同时，在组件模板里面也进行参数传入
<demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery"> </demo-grid>
组件的定义里面要继承模板的数据,也就是在模板里面是filter-key，注意要转化驼峰写法
Vue.component('demo-grid', { template: '#grid-template', props: { data: Array, columns: Array, filterKey: String } })
这个时候，我们的模板里面要过滤符合filterKey的数据,这里就用到了过滤器，vue提供了一个叫做filterBy的过滤器。|与过滤器，第一个为过滤器的名字，后面的是参数，| filterBy filterKey使用的就是filterBy的过滤器，参数是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> </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的效果如下
我们希望能够在不同的状态里面切换，所以我们选择在组件里面有数据存储排序的状态信息，用一个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>
现在也就是根据name升序排序，所以我们看到表格的结果如下
增加交互
我们希望能够通过点击表格头部来自动升序降序,所以添加鼠标事件，另外把span的样式和sortOrders[key]的值相关联,增加active的样式
<th v-for="key in columns" @click="sortBy(key)" :class="{active: sortKey == key}"> {{key | capitalize}} <span :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"> </span> </th>
相关active的样式如下
th.active .arrow { opacity: 1; }
对于鼠标事件，我们定义在表格内部，也就是把sortKey定位当前活跃的元素，同时改变sortOrders[key]的值