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

Devops海洋的渔夫

发布于 2022-01-17 08:47:30

1.9K00

代码可运行

文章被收录于专栏：Devops专栏Devops专栏

运行总次数：0

代码可运行

需求

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

处理步骤

在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) 来进行判断，如果存在，那么则会为1，如果searchName为空值，则会0。在这种情况下，则将数据加入到新的数组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
                    }
                })

            },
        }

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