element中Select選擇器實(shí)現(xiàn)自定義顯示內(nèi)容
更新時(shí)間：2023年12月25日 10:52:25 作者：山為樽水為沼
在我們很多前端業(yè)務(wù)開發(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)文章
Vue3實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)效果的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何通過Vue3實(shí)現(xiàn)簡單的轉(zhuǎn)盤抽獎(jiǎng)效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的可以了解一下2023-10-10
使用Vue.$set()或者Object.assign()修改對(duì)象新增響應(yīng)式屬性的方法
vue代碼中,只要在data對(duì)象里定義的對(duì)象,賦值后,任意一個(gè)屬性值發(fā)生變化，視圖都會(huì)實(shí)時(shí)變化，這篇文章主要介紹了使用Vue.$set()或者Object.assign()修改對(duì)象新增響應(yīng)式屬性,需要的朋友可以參考下2022-12-12
vue處理get/post的http請(qǐng)求的實(shí)例
本文主要介紹了vue處理get/post的http請(qǐng)求的實(shí)例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了詳解Vue結(jié)合后臺(tái)的增刪改案例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
vue實(shí)現(xiàn)word，pdf文件的導(dǎo)出功能
這篇文章給大家介紹了vue實(shí)現(xiàn)word或pdf文檔導(dǎo)出的功能，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-07
這篇文章主要介紹了使用Vue逐步實(shí)現(xiàn)Watch屬性詳解，watch對(duì)象中的value分別支持函數(shù)、數(shù)組、字符串、對(duì)象，較為常用的是函數(shù)的方式，當(dāng)想要觀察一個(gè)對(duì)象以及對(duì)象中的每一個(gè)屬性的變化時(shí)，便會(huì)用到對(duì)象的方式2022-08-08
在本篇文章里小編給大家分享的是關(guān)于vue開發(fā)中遇到的問題總結(jié)，有興趣的朋友們可以學(xué)習(xí)參考下。2020-04-04
Vue 數(shù)據(jù)綁定從 v-bind 到 v-model 的實(shí)戰(zhàn)案例
本文將系統(tǒng)解析Vue中兩種核心數(shù)據(jù)綁定方式,單向綁定 (v-bind) 和雙向綁定 (v-model),通過實(shí)例講解其工作原理、使用場(chǎng)景及最佳實(shí)踐,幫助你真正掌握 Vue 數(shù)據(jù)驅(qū)動(dòng)的精髓,感興趣的朋友跟隨小編一起看看吧2025-10-10
這篇文章主要為大家介紹了vue可用于拖動(dòng)排序組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了Vue中的混入的使用(vue mixins)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06