</demo-grid>
然后我们在组件里面把相应的数据继承下来。
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: '',
...
})同时，在组件模板里面也进行参数传入
<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来作为三角形的容器
