效果展示: 点击表头可排序，搜索可过滤表格内容
屏幕快照 2019-07-17 上午12.46.30.png
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</head>
<body>
<div id="app" class="container-fluid" style="margin: 60px">
<table class="table">
<thead>
<th v-for="key in keys" scope="col" @click="sort(key)">{{ key }}</th>
</thead>
<tbody>
<tr>
<td v-for="key in keys"><input type="text" class="form-control" v-model="filters[key]" placeholder="Search"></td>
</tr>
<tr v-for="data in (sortedActivity, filteredList)" v-bind:class="[getClassByGrade(data.grade)]">
<td v-for="key in keys"> {{ data[key] }}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
itemList: [],
keys: [],
currentSortColumn: '',
currentSortBy: 'desc',
filters: {}
},
mounted: function () {
this.init()
},
computed: {
getFilters() {
return this.filters
},
getClassByGrade() {
return function (grade) {
if (grade >= 90) return 'table-success'
if (grade >= 80) return 'table-primary'
if (grade >= 60) return 'table-info'
return 'table-danger'
}
},
sortedActivity: function () {
let res = this.itemList.sort((a, b) => {
let modifier = 1;
if (this.currentSortBy === 'desc') modifier = -1;
if (a[this.currentSortColumn] < b[this.currentSortColumn]) return -1 * modifier;
if (a[this.currentSortColumn] >= b[this.currentSortColumn]) return 1 * modifier;
});
return res
},
filteredList() {
let res = this.itemList.filter((item) => {
let result = true
for (let i in this.keys) {
let key = this.keys[i]
result = result && String(item[key]).toLowerCase().match(this.filters[key].toLowerCase())
}
return result;
})
return res
}
},
methods: {
init: function () {
this.getItemList()
},
getItemList: function () {
this.itemList = [
{"name": "Xiao Ming", "grade": 90, "age": 15},
{"name": "Xiao Hu", "grade": 80, "age": 16},
{"name": "Uzi", "grade": 80, "age": 17},
{"name": "Rookie", "grade": 100, "age": 16},
{"name": "Seven", "grade": 40, "age": 16}
]
this.getKeys()
},
getKeys: function() {
if (this.itemList.length > 0) {
this.keys = Object.keys(this.itemList[0])
this.currentSortColumn = this.keys[0]
}
this.keys.forEach((key) => this.filters[key] = '')
},
sort: function (column) {
if (column === this.currentSortColumn) {
this.currentSortBy = this.currentSortBy === 'desc' ? 'asc' : 'desc';
}
this.currentSortColumn = column;
}
}
})
</script>
