直接上代码:
<el-input
placeholder="地区"
v-model.trim="searchValue"
@input="throttle()"
suffix-icon="el-icon-search">
</el-input>
// v-for="item in query(searchValue)"
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="item in query(searchValue)" :label="item.id" :key="item.id" style="display:block;margin-bottom: 10px;">{{item.name}}</el-checkbox>
</el-checkbox-group>
data() {
return {
searchValue: "",
len:true,
timer: null
}
},
// 防抖形
throttle(){
this.clearTimer()
if (this.searchValue && this.searchValue.length > 0) {
this.len = true
this.timer = setTimeout(() => {
console.log(this.searchValue)
//此处为接口函数
}, 1000)
} else {
if (this.len) {
console.log(this.searchValue)
this.query(searchValue)
//此处为接口函数
}
if (this.searchValue === '') {
this.len = false
return
}
}
},
query(searchValue){
// 我这里直接return(也可赋给变量return变量出去)
return this.apllySeList.filter(item => {
// 如果list(name)包含key(输入框) => true
if(item.name.includes(searchValue)){
// 返回item
return item;
}
})
},
clearTimer() {
if (this.timer) {
clearTimeout(this.timer)
}
},