<!DOCTYPE html> <htmlheadMeta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> charset="utf-8"title></="keywords"="" ="description"link rel="stylesheet" href="css/reset.css" type="text/css" script type="text/javascript" src="js/vue.min.js"scriptstyle> body { font-family: '微软雅黑'; font-size 14px color #444; } table border 2px solid #42b983 border-radius 3px background-color #fff table thpadding10px 50px table td10 50px} </body="text/x-template" id="grid-template"> <table> thead> tr> th v-for="key in columns @clicksortBy(key) :class{active: sortKey == key} {{key | capitalize}} span classarrowsortOrders[key] > 0 ? 'asc' : 'dsc'></span> th> tr> thead> tbodytr ventry in data | filterBy filterKey | orderBy sortKey sortOrders[sortKey]td v{{entry[key]}}td> tbody> table> > div id="demo" style="width:500px;margin:0 auto;padding:10px;"> form ="search"="margin-bottom: 30px;"> Search input ="query" v-model="searchQuery"formdemo-grid :data="gridData" :columns="gridColumns" :filter-keydemo-griddiv> ="text/javascript" Vue.component('demo-grid,{ template: #grid-templatefunction () { var sortOrders {} this.columns.forEach( (key) { sortOrders[key] = 1; }) return { sortKey: '' (key) { .sortKey key; .sortOrders[key] * ; } } }) demo new Vue({ el: #demonamepower],gridData: [ { name: Chuck NorrisBruce Lee9000 },1)">Jackie Chan7000Jet Li8000 } ] } }) >
结果如图所示，可以搜索过滤，点击table th可以降序，升序排列当前列
