<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<script type="text/javascript" src="js/vue.min.js"></script>
<style>
body {
font-family: '微软雅黑';
font-size: 14px;
color: #444;
} table {
border: 2px solid #42b983;
border-radius: 3px;
background-color: #fff;
}
table th{padding:10px 50px;}
table td{padding:10 50px;}
</style>
</head>
<body>
<script type="text/x-template" id="grid-template">
<table>
<thead>
<tr>
<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>
</tr>
</thead>
<tbody>
<tr v-for="entry in data | filterBy filterKey | orderBy sortKey sortOrders[sortKey]">
<td v-for="key in columns">{{entry[key]}}</td>
</tr>
</tbody>
</table>
</script> <div id="demo" style="width:500px;margin:0 auto;padding:10px;">
<form id="search" style="margin-bottom: 30px;">
Search <input name="query" v-model="searchQuery">
</form>
<demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery"></demo-grid>
</div> <script type="text/javascript">
Vue.component('demo-grid', {
template: '#grid-template',
props: {
data: Array,
columns: Array,
filterKey: String
},
data: function () {
var sortOrders = {}
this.columns.forEach(function (key) {
sortOrders[key] = 1;
})
return {
sortKey: '',
sortOrders: sortOrders
}
},
methods: {
sortBy: function (key) {
this.sortKey = key;
this.sortOrders[key] = this.sortOrders[key] * -1;
}
}
}) var demo = new Vue({
el: '#demo',
data: {
searchQuery: '',
gridColumns: ['name', 'power'],
gridData: [
{ name: 'Chuck Norris', power: Infinity },
{ name: 'Bruce Lee', power: 9000 },
{ name: 'Jackie Chan', power: 7000 },
{ name: 'Jet Li', power: 8000 }
]
}
}) </script>
</body>
</html>
结果如图所示，可以搜索过滤，点击table th可以降序，升序排列当前列