700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue-antd框架实现下拉框模糊搜索

vue-antd框架实现下拉框模糊搜索

时间:2019-12-24 16:46:50

相关推荐

vue-antd框架实现下拉框模糊搜索

在使用vue-antd框架进行开发时,不得不说会有很多的小坑,一不小心就会进坑。说一下antd中使用下拉框组件,实现模糊搜素的功能。话不多说,直接上代码:

<a-selectv-model="form.clueRequest.clueCode":getPopupContainer="(triggerNode)=>triggerNode.parentNode":filter-option="filterOption"show-searchplaceholder="请选择"@change="selectClue(form.clueRequest.clueCode)"

>

<a-select-optionv-for="(option,index)inclueData":value="option.clueCode":key="index">

{{option.clueName}}

</a-select-option>

</a-select>

紧接着,在methods中写一个方法:

filterOption(input,option){

return(

ponentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase())>=0

)

},

其中clueData为请求后端返回的所有的下拉数据 , 记住一定要写上filterOption这个方法,这样就实现了下拉框可以进行通过输入的内容进行模糊搜索。

大家还有什么更好的方法,可以进行指点。欢迎评论交流

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。