element中Select選擇器實(shí)現(xiàn)自定義顯示內(nèi)容
更新時(shí)間：2023年12月25日 10:52:25 作者：山為樽水為沼
在我們很多前端業(yè)務(wù)開(kāi)發(fā)中,往往為了方便,都需要自定義一些用戶組件,本文主要介紹了element中Select選擇器實(shí)現(xiàn)自定義顯示內(nèi)容,感興趣的可以了解一下
正常情況下，下拉框選項(xiàng)展示內(nèi)容，就是選擇后展示的label內(nèi)容
如圖所示：
但是要想自定義選項(xiàng)內(nèi)容，但是展示內(nèi)容不是選項(xiàng)label的內(nèi)容，可以在el-option標(biāo)簽內(nèi)增加div進(jìn)行自定義選項(xiàng)label展示，但選擇后結(jié)果展示仍是el-option標(biāo)簽內(nèi)label屬性綁定的值。
<el-select
v-model="stat"
clearable
placeholder="">
<el-option
v-for="item in list"
:key="item.id"
:value="item.id"
:label="item.name">
<div>{{ item.typeName + '-' + item.name}}</div>
</el-option>
</el-select>
展示效果如圖：
到此這篇關(guān)于element中Select選擇器實(shí)現(xiàn)自定義顯示內(nèi)容的文章就介紹到這了,更多相關(guān)element Select自定義顯示內(nèi)容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue2.0 如何在hash模式下實(shí)現(xiàn)微信分享
這篇文章主要介紹了vue2.0 如何在hash模式下實(shí)現(xiàn)微信分享,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
electron?dialog.showMessageBox的使用案例
Electron?Dialog?模塊提供了api來(lái)展示原生的系統(tǒng)對(duì)話框,本文主要介紹了electron?dialog.showMessageBox的使用案例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)按鈕切換圖片，正向反向以及順序切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
本篇文章主要介紹了詳解Vue方法與事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
Vue實(shí)現(xiàn)動(dòng)態(tài)路由的示例詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)路由的相關(guān)知識(shí),主要涉及到兩個(gè)方面：一是路由的動(dòng)態(tài)添加,二是基于路由的參數(shù)變化來(lái)動(dòng)態(tài)渲染組件,下面就跟隨小編一起深入學(xué)習(xí)一下動(dòng)態(tài)路由的實(shí)現(xiàn)吧2024-02-02
vue項(xiàng)目中如何將數(shù)據(jù)導(dǎo)出為word文檔
這篇文章主要介紹了vue項(xiàng)目中如何將數(shù)據(jù)導(dǎo)出為word文檔問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
在vue中axios設(shè)置timeout超時(shí)的操作
這篇文章主要介紹了在vue中axios設(shè)置timeout超時(shí)的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Teleport是一個(gè)內(nèi)置組件，它可以將一個(gè)組件內(nèi)部的一部分模板“傳送”到該組件的?DOM?結(jié)構(gòu)外層的位置去，本文就來(lái)介紹一下如何使用，感興趣的可以了解一下2023-05-05
vue搜索頁(yè)開(kāi)發(fā)實(shí)例代碼詳解（熱門搜索，歷史搜索，淘寶接口演示）
這篇文章主要介紹了vue搜索頁(yè)開(kāi)發(fā)實(shí)例（熱門搜索，歷史搜索，淘寶接口演示）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細(xì)介紹了vue v-model表單控件綁定的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05