當(dāng)選項(xiàng)過(guò)多時(shí)衔沼，使用下拉菜單展示并選擇內(nèi)容晰甚。使用change事件，選中值發(fā)生變化時(shí)觸發(fā)此事件
<el-select v-model="providerData" @change="choseProvider" popper-class="custom-select-style" >
<el-option
v-for="item in options"
:key="item.id"
:label="item.label"
:value="item.id">
</el-option>
</el-select>
<script>
export default {
data() {
return {
options: [{
id: '1',
label: '黃金糕'
}, {
id: '2',
label: '雙皮奶'
}, {
id: '3',
label: '蚵仔煎'
}, {
id: '4',
label: '龍須面'
}, {
id: '5',
label: '北京烤鴨'
}],
providerData：'',
}
},
methods: {
choseProvider(data){
this.providerData = data;
},
}
}
</script>
-
完成效果圖
最后還需要提醒大家一點(diǎn)嘱支，本篇文章中的例子僅供參考學(xué)習(xí)蚓胸，切誤將本篇文章中的代碼直接使用在正式項(xiàng)目當(dāng)中。希望以上代碼對(duì)大家有所幫助除师。
