vue简单实现模糊搜索
search函数进行对我需要的问题对象数组进行操作。
·
1:准备数据:
data () {
return {
//主要搜索的对象数组
questionArrayList : {
questionName : "",
questionValue : ""
},
//搜索的文本框
searchText : ""
}
},
computed: { //设置计算属性
}
2:解决过程:
<div slot="extra">
<a-radio-group>
</a-radio-group>
<a-input-search @search="searchQuestion" v-model="searchText" style="margin-left: 16px; width: 272px;" />
</div>
v-model="searchText"绑定文本框的数据,进行获取
。
<div slot="extra">
<a-radio-group>
</a-radio-group>
<a-input-search @search="searchQuestion" v-model="searchText" style="margin-left: 16px; width: 272px;" />
</div>
@search="searchQuestion"绑定搜索事件
,
search函数进行对我需要的问题对象数组进行操作。
searchQuestion() {
if (!this.searchText) {
return this.questionArrayList;
}else{
return this.questionArrayList.filter((value)=>{
return value.questionName.includes(this.searchText)
})
}
}
1:如果输入框为空,我返回原来的数组对象,即不操作
,
2:如果输入框不为空,我进行过滤返回包含文本框的新的对象集合(原来的questionArrayList未改变
。
更多推荐
已为社区贡献1条内容
所有评论(0)