el-select選擇器組件下拉框增加自定義按鈕的實現(xiàn)
更新時間：2024年07月05日 11:58:13 作者：程序猿想成程序獅
本文主要介紹了el-select選擇器組件下拉框增加自定義按鈕的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(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選擇器組件下拉框增加自定義按鈕的實現(xiàn)的文章就介紹到這了,更多相關(guān)el-select選擇器下拉框自定義按鈕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue devserver及其配置方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
vue3子組件上綁定(v-model="xx")父組件傳過來的值后報錯解決
這篇文章主要給大家介紹了關(guān)于vue3子組件上綁定(v-model="xx")父組件傳過來的值后報錯解決辦法,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
vue中使用echarts實現(xiàn)動態(tài)數(shù)據(jù)綁定以及獲取后端接口數(shù)據(jù)
總結(jié)一下自己最近項目中用echarts動態(tài)獲取接口數(shù)據(jù)并畫圖的方法,下面這篇文章主要給大家介紹了關(guān)于vue中使用echarts實現(xiàn)動態(tài)數(shù)據(jù)綁定以及獲取后端接口數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-07-07
Vue渲染器設(shè)計實現(xiàn)流程詳細(xì)講解
在瀏覽器平臺上，用它來渲染其中的真實DOM元素。渲染器不僅能夠渲染真實的DOM元素，它還是框架跨平臺能力的關(guān)鍵。所以在設(shè)計渲染器的時候一定要考慮好自定義的能力2023-01-01
vue3動態(tài)路由解決刷新頁面空白或跳轉(zhuǎn)404問題
這篇文章主要為大家詳細(xì)介紹了vue3如何通過動態(tài)路由解決刷新頁面空白或跳轉(zhuǎn)404問題,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2025-01-01
VueCli生產(chǎn)環(huán)境打包部署跨域失敗的解決
這篇文章主要介紹了VueCli生產(chǎn)環(huán)境打包部署跨域失敗的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了面試官：為什么Vue中的v-if和v-for不建議一起用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了vue.js 實現(xiàn)輸入框動態(tài)添加功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
這篇文章主要為大家介紹了vue?項目優(yōu)雅的對url參數(shù)加密詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了Vue3 列表界面數(shù)據(jù)展示，文章主要詳介紹的內(nèi)容就是做的就是把打到頁面的數(shù)據(jù)，帶樣式，也就是說好看點(diǎn)顯示,需要的朋友可以參考一下2021-11-11