需求是怎样的

因为数据条数过多，用户要求新增搜索功能

image-20230821151723985

实际如何做

面板头部头部空间有限，再加之考虑美观性，决定通过动态监听搜索框内所输入的数据，展示匹配结果。因为监听变量位于对象内，故采用深度监听。

两种监听方式

普通监听
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
	<div></div>
</template>
<script>
	export default {
		data(){
			variable:null,
		},
		watch:{
			// 此处监听variable变量，当期有变化时执行
			variable(item1,item2){
				// item1为新值，item2为旧值
			}
		}
	}
</script>
深度监听（变量在对象内）
一个变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
	<div></div>
</template>
<script>
	export default {
		data(){
			obj:{
				a:''
			},
		},
		watch:{
			// 此处监听obj属性a值变量
			'obj.a'(item1,item2){
				// item1为新值，item2为旧值
			},
			deep:true
		}
	}
</script>
多个变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
	<div></div>
</template>
<script>
	export default {
		data(){
			obj:{
				a:'',
				b:'',
				c:''
			},
		},
		watch:{
			obj:{
				// 此处监听obj属性a值变量
				handler(item1,item2){
					// item1为新值，item2为旧值
				},
				deep:true 
				// 对象中对象属性变化监测需要使用deep:true，多少层内产生变化都可以监测到
			}
		}
	}
</script>

实际代码

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
<template>
	<div></div>
</template>
<script>
	export default {
		data(){
			overviewForm:{
				 name:''
			},
		},
		watch:{
                'overviewForm.name' (newName) {
                    this.fetchOverviewData(newName);
                }
            },
        methods：{
         //获取车间信息
                fetchWorkShopData(param){
                    axios({
                        headers: {
                            "Access-Control-Allow-Origin":"*"
                        },
                        method: 'post',
                        url: HTTPUrl+'reason/queryWorkShopList',
                        data: {
                            company_id: param,
                        }
                    }).then(res=>{
                        if(res.status===200){
                            console.log(res.data)
                            this.workshopList=res.data.data;
                            // this.alarmTypeList=res.data.data.alarmTypeList;
                        }
                    })
                },
        }
	}
</script>

最终实现结果

image-20230821151741296