18. Vue 常用列表操作实例 - 根据关键字实现数组的过滤

需求

前面介绍了列表操作中的数据新增、删除的功能，本篇章来看看关键字查询的功能。

处理步骤

在VM实例中定义关键字参数 searchName .

var vm = new Vue({
            el: '#app',
            data: {
                searchName:'', // 关键字
                ....
            },

复制

要在筛选框绑定关键字数据到 VM 实例中的 searchName 属性，后续用来基于这个 searchName 来过滤数组数据。

<!-- 搜素关键字 -->
<input v-model="searchName" type="text" class="form-control" id="input_keywords" placeholder="输入关键字">

复制

3.在使用

v-for

指令循环每一行数据的时候，不再直接

item in list

，而是

in

一个过滤的methods 方法，同时，把过滤条件

searchName

传递进去：

<tr v-for="item in search(searchName)" :key="item.id">

复制

在VM实例的methods方法中定义过滤 search() 方法，在数据过滤的方法上，可以有两种处理方式。

4.1 首先创建一个新的数组

newList

，然后使用

forEach

方法遍历数据数组

list

，判断关键字

searchName

是否包含在遍历数据中，可以使用

if (item.name.indexOf(searchName) != -1)

来进行判断，如果存在，那么则会为

，如果

searchName

为空值，则会

。在这种情况下，则将数据加入到新的数组

newList

中，然后提供列表渲染数据。

methods: {
            search(searchName) {
                // 创建新的数组newList
                var newList = [];
                // 遍历数据，判断关键字是否存在，存在则加入newList中
                this.list.forEach(item => {

                    // 如果indexOf为-1，则说明关键字不存在该字符串中，
                    // 反之，存在或者searchName为空字符串
                    if (item.name.indexOf(searchName) !== -1) {
                        newList.push(item)
                    }

                });
                // 将过滤后的newList返回，提供列表数据渲染
                return newList
            },
        }

复制

浏览器实现关键字搜索效果如下：

4.2 除了使用

forEach

遍历数组外，还可以使用

filter

过滤数组。上面使用

forEach

方法还要自己创建一个

newList

来处理数据，而

filter

则是直接返回数组，不需要单独去创建。还有上面使用

if (item.name.indexOf(searchName) != -1)

来判断关键字是否包含在字符串中，这里还可以使用

includes

方法。

注意：在

ES6

中，为字符串提供了一个新方法

includes

，叫做

String.prototype.includes('要包含的字符串')

，如果包含，则返回

true

，否则返回

false

methods: {

            search(searchName) {

                // 使用filter则是返回过滤的数据自动生成数组
                return this.list.filter(item => {
                    // 注意 ： ES6中，为字符串提供了一个新方法，
                    // 叫做  String.prototype.includes('要包含的字符串')
                    //  如果包含，则返回 true ，否则返回 false
                    //  contain
                    if (item.name.includes(searchName)) {
                        return item
                    }
                })

            },
        }

复制

浏览器实现关键字搜索效果如下：