作者：也许吧但不是2007029SES | 来源：互联网 | 2022-01-04 19:38
这篇文章主要介绍了vue实现可搜索的下拉菜单组件功能，在文中通过实例代码给大家补充介绍了vue组件实践-可搜索下拉框，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
之前也写过这个小组件，最近遇到select下加搜索的功能，所以稍微完善一下。
效果图：
子组件 DROPDOWN.VUE
父组件调用
import Dropdown from '@/components/dropdown.vue'
export default {
data() {
return {
itemlist: {
cur: {
val: "",
name: "所有产品"
},
data: [{
val: "",
name: "所有产品"
}, {
val: 1,
name: "梦幻西游"
}, {
val: 2,
name: "梦幻无双"
}, {
val: 3,
name: "大话西游"
}]
},
}
},
components: {
Dropdown,
},
methods :{
dropDownClick(e) {
console.log(e.name, e.val)
}
}
}
默认是不带搜索框，如果需要可以传这个:isNeedSearch="true"。
ps：下面看下vue组件实践-可搜索下拉框
实践加深对vue的理解和运用有效途径，本文是基于vue的可搜索下拉框定制组件实现，在此记录.
一、效果
二、组件代码
dropdown.vue
三、组件使用
总结
以上所述是小编给大家介绍的vue下拉菜单组件（含搜索）功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
京公网安备 11010802041100号