el-select選擇器組件下拉框增加自定義按鈕的實(shí)現(xiàn)
更新時(shí)間：2024年07月05日 11:58:13 作者：程序猿想成程序獅
本文主要介紹了el-select選擇器組件下拉框增加自定義按鈕的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
先看效果
原理：在el-select下添加禁用的el-option，將其value綁定為undefined，然后覆蓋el-option禁用狀態(tài)下的默認(rèn)樣式即可
示例代碼如下：
<template>
<div class="extra-button-select" style="padding: 20px">
<el-select v-model="selected">
<el-option
v-for="option in options"
:key="option.id"
:label="option.label"
:value="option.id"
></el-option>
<el-option disabled style="cursor: pointer">
<el-button type="text" @click="onClickBtn1"><i class="el-icon-menu"></i> 按鈕1</el-button>
</el-option>
<el-option :value="undefined" disabled style="cursor: pointer">
<el-button type="text" @click="onClickBtn2"><i class="el-icon-menu"></i> 按鈕2</el-button>
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: 'extra-button-select',
data() {
return {
selected: 1,
options: [
{
id: 1,
label: 'Option 1',
},
{
id: 2,
label: 'Option 2',
}
]
}
},
methods: {
onClickBtn1() {
this.$message.info('點(diǎn)擊了按鈕1')
},
onClickBtn2() {
this.$message.info('點(diǎn)擊了按鈕2')
}
}
}
</script>
<style scoped lang="scss">
</style>到此這篇關(guān)于el-select選擇器組件下拉框增加自定義按鈕的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)el-select選擇器下拉框自定義按鈕內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue如何關(guān)閉eslint檢測(cè)(多種方法)
我們?cè)陂_(kāi)發(fā)vue項(xiàng)目的時(shí)候，創(chuàng)建的時(shí)候可能會(huì)不小心選擇了eslint，所以如果不想讓eslint檢測(cè)，我們?cè)撛趺崔k呢，本文就詳細(xì)的介紹了幾種關(guān)閉方法，感興趣的可以了解一下2021-12-12
文章介紹了如何在Vue3和Beego中配置跨域請(qǐng)求,在Beego的router.go文件的init函數(shù)中添加option函數(shù)來(lái)回應(yīng)預(yù)檢請(qǐng)求,以支持跨域請(qǐng)求,這是個(gè)人經(jīng)驗(yàn)分享,希望能幫助到大家2025-01-01
Vue中router.beforeEach與beforeRouteEnter的區(qū)別及說(shuō)明
這篇文章主要介紹了Vue中router.beforeEach與beforeRouteEnter的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要給大家介紹了關(guān)于vue子組件獲取到它父組件數(shù)據(jù)的4種方法,對(duì)于vue來(lái)說(shuō)組件之間的消息傳遞是非常重要的,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue中全局常用的過(guò)濾方法解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue中定義全局聲明vscode插件提示找不到問(wèn)題解決
這篇文章主要為大家介紹了vue中定義全局聲明vscode插件提示找不到問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue實(shí)現(xiàn)評(píng)價(jià)星星功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)評(píng)價(jià)星星功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
uniapp如何打包到H5并成功發(fā)布,以及在打包過(guò)程中會(huì)遇到的坑如何解決,本文將一一講解,文中通過(guò)圖文結(jié)合的方式給大家講解的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-10-10
Vue3.x源碼調(diào)試的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue3.x源碼調(diào)試的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue使用百度地圖報(bào)錯(cuò)BMap?is?not?defined問(wèn)題及解決
這篇文章主要介紹了vue使用百度地圖報(bào)錯(cuò)BMap?is?not?defined問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10