<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的效果如下
我们希望能够在不同的状态里面切换，所以我们选择在组件里面有数据存储排序的状态信息，用一个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="arrow"
:class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
</span>
</th>相关active的样式如下
th.active .arrow {
opacity: 1;
}对于鼠标事件，我们定义在表格内部，也就是把sortKey定位当前活跃的元素，同时改变
sortOrders[key]的值
// register the grid component
