vue实现模糊查询搜索
<bz-inputsize="small"class="search"v-model="value"placeholder="请输入关键字搜索"><template v-slot:left-icon><img class="icon" src="../../assets/img/综合查询/搜索.png" alt="" />...
·
<bz-input
size="small"
class="search"
v-model="value"
placeholder="请输入关键字搜索"
>
<template v-slot:left-icon>
<img class="icon" src="../../assets/img/综合查询/搜索.png" alt="" />
</template>
</bz-input>
//存储初始值
localStorage.setItem("fydataInfo", JSON.stringify(this.dataInfo));
watch: {
// 模糊查询搜索
value(newVal, oldVal) {
if (this.timer) {
clearTimeout(this.timer);
}
console.log(newVal, oldVal);
if (newVal == "") {
// 取值
let add = localStorage.getItem("fydataInfo");
console.log(JSON.parse(add));
if (newVal == "") {
this.dataInfo = JSON.parse(add);
}
} else {
// 用于模糊查询
this.timer = setTimeout(() => {
const result = [];
this.dataInfo.filter(item =>{
if(item.name.indexOf(newVal) !== -1){
result.push(item)
}
})
console.log(result);
this.dataInfo = result;
}, 100);
}
},
},
更多推荐
已为社区贡献11条内容
所有评论(0)