前端实现模糊查询效果

话不多说，直接上代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<template>
    <div class="safetyInfo">
        <el-input placeholder="请输入"
                       v-model="search"
                       @input="submitFun"
                       ref='searchInput'></el-input>
 
        <ul v-for="(list,index) in searchData"
            :key="index">
            <li>
                <span>{{list.phoneName}}</span>
                <span>{{list.ascriptionPhone}}</span>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            search: '',
            searchData: '',
            products: [
                //假数据
                {
                    'ascriptionPhone': '17000000000',
                    'phoneName': '张三',
                },
                {
                    'ascriptionPhone': '18000000000',
                    'phoneName': '李四',
                },
                {
                    'ascriptionPhone': '18000000000',
                    'phoneName': '王麻子',
                }
            ]
        };
    },
    created () {
        this.inintData();
    },
    methods: {
        inintData() {
            this.searchData = this.products;
        },
        submitFun() {
            
            let search = this.search;
            this.searchData = this.products.filter(function (product) {
                console.log('过滤', product);
                let searchField = { phoneName: product.phoneName, ascriptionPhone: product.ascriptionPhone };
                return Object.keys(searchField).some(function (key) {
                    console.log('key值', key);
                    return String(product[key]).toLowerCase().indexOf(search) > -1;
                });
            });
        }
 
    }
 
};
</script>