<template>
<el-select v-model="value" filterable placeholder="请选择" value-key="id" clearable @change='change'>
<el-option v-for="item in options" :key="item.id" :label="item.dd" :value="item">
// label="item.dd" 搜索的是拼接好的该字段，当选中某一项，输入框展示的也是该字段
{{item.phone}}{{item.name}}
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [
{
id:1,
name: '张三',
phone: '15235862421',
dd:'张三 15235862421'
},
{
id:2,
name: '李四',
phone: '15135862421',
dd:'李四 15135862421'
},
{
id:3,
name: '王五',
phone: '18135862421',
dd:'王五 18135862421'
},
],
value: ''
}
},
methods:{
change(){
console.log(this.value,'value--')
}
}
}
</script>
vue下拉框搜索可搜姓名和电话
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 效果如下下拉选中之后可以配置Tag形式展现 支持远程搜索 支持分页 使用方法配置如下<remote-selectl...
- input+ul模拟下拉框选择事件，可动态定制下拉列表显示内容（我暂时写死的），选择可随键盘上下键移动，回车或点击...
