在vue.js中,如何使用针对表中特定列的多个过滤器来过滤表.
例如,如果我有两个搜索字段name,age如何绑定它们以搜索下表中的相应列.因此,如果用户在名称输入中输入名称,则只应在名称列中搜索名称.如果用户也输入了年龄,那么它应该形成一个and条件并在年龄列中搜索年龄.目前,过滤器只搜索整个表格.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Vast World of Vue.js</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body id="demo" class="container">
<input v-model="name" class="form-control" placeholder="search by name"><br>
<input v-model="age" class="form-control" placeholder="search by age">
<table class="table table-striped">
<thead>
<tr>
<th >
Name
</th>
<th >
Age
</th>
</thead>
<tbody>
<tr v-for="item in people | filterBy name | filterBy age">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
<script src="http://vuejs.org/js/vue.js"></script>
<script>
new Vue({
el: '#demo',
name: '',
age: '',
data: {
people: [
{ name: 'John', age: 50 },
{ name: 'Jane', age: 22 },
{ name: 'Paul', age: 34 },
{ name: 'Kate', age: 15 },
]
}
});
</script>
</body>
</html>
由于我们不再有过滤器,您需要使用计算属性.
所以你可以这样做:
{
data: {
people: [{ name: }],
age: 28,
name: 'bi',
}
computed: {
filteredPeople () {
const { name, age, people } = this
return this.people
.filter(person => person.name.toLowerCase().indexOf(name.toLowerCase()) > -1)
.filter(person => person.age === age)
},
},
}
然后你会循环filteredPeople而不是people
<tr v-for="person in filteredPeople">...</tr>
如果您查看API文档中的第二个示例,filterBy您将看到将其限制为字段的功能.
你想要的东西是这样的:
item in people | filterBy name in 'name' | filterBy age in 'age'
| 归档时间： |
|
| 查看次数： |
7343 次 |
| 最近记录： |