Vue.js 通过特定列的多个过滤器过滤数据

Question

在 vue.js 中，如何使用针对 table 上特定列的多个过滤器来过滤 table。

例如，如果我有两个搜索字段 name 和 age，我如何绑定它们以搜索下方 table 中的相应列。因此，如果用户在名称输入中输入名称，它应该只在名称列中搜索名称。如果用户也输入了年龄，那么它应该形成一个 and 条件并在年龄列中搜索年龄。目前过滤器只搜索整个 table.

 <!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>

Answer 1

Vue 2

由于我们不再提供过滤器，因此您需要使用计算属性。

所以你可以这样做：

{
  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>

视觉 1

如果您查看 filterBy 的 API 文档中的第二个示例，您会发现可以将其限制为一个字段。

你想要这样的东西：

item in people | filterBy name in 'name' | filterBy age in 'age'

Vue.js 通过特定列的多个过滤器过滤数据

Vue.js filter data by multiple filters on specific columns

filter

vue.js

Vue 2

视觉 1