Vue 2

Question

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

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>

Vue 1

如果您查看filterBy的API文档中的第二个示例，您将看到将其限制为字段的功能。

你想要的东西是：

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

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

1 个答案:

Vue 2

Vue 1