<!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="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可以降序，升序排列当前列
