vue-antd框架实现下拉框模糊搜索
在使用vue-antd框架进行开发时,不得不说会有很多的小坑,一不小心就会进坑。说一下antd中使用下拉框组件,实现模糊搜素的功能。话不多说,直接上代码:<a-selectv-model="form.clueRequest.clueCode":getPopupContainer="(triggerNode)=>triggerNode.parentNode":filter-option=
在使用vue-antd框架进行开发时,不得不说会有很多的小坑,一不小心就会进坑。说一下antd中使用下拉框组件,实现模糊搜素的功能。话不多说,直接上代码:
<a-select v-model="form.clueRequest.clueCode" :getPopupContainer=" (triggerNode) => triggerNode.parentNode" :filter-option="filterOption" show-search placeholder="请选择" @change="selectClue(form.clueRequest.clueCode)"
>
<a-select-option v-for="(option,index) in clueData" :value="option.clueCode" :key="index" >
{{option.clueName}}
</a-select-option>
</a-select>
紧接着,在methods中写一个方法:
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
)
},
其中clueData为请求后端返回的所有的下拉数据 , 记住一定要写上filterOption这个方法,这样就实现了下拉框可以进行通过输入的内容进行模糊搜索。
大家还有什么更好的方法,可以进行指点。欢迎评论交流
更多推荐
所有评论(0)