久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

04
2023/11

elementUI之select選擇器自定義下拉框顯示內(nèi)容

發(fā)布時(shí)間:2023-11-04 16:55:12
發(fā)布者:MaiMai
瀏覽量:
0

elementUI中的select選擇器,通過el-option標(biāo)簽來編輯子菜單的內(nèi)容。

官網(wǎng)示例

如圖所示,el-option的 value 屬性值為選擇器v-model綁定值,label屬性值為下拉菜單中渲染的內(nèi)容。若按照官網(wǎng)所提供的案例,只能將某條數(shù)據(jù)作為渲染的內(nèi)容。如果想要自定義label內(nèi)容和樣式應(yīng)如何處理呢?

如果只是簡(jiǎn)單的拼接字符串,可以直接在:label中對(duì)顯示內(nèi)容進(jìn)行編輯。如圖:

label編輯

若想要進(jìn)行復(fù)雜的內(nèi)容編輯,如三元表達(dá)式判斷,則無法在:label中操作,這時(shí)我們可以利用span標(biāo)簽(類似插槽的方式)。

插入span標(biāo)簽

注意:此時(shí)并不意味著:label中的內(nèi)容失效,span標(biāo)簽只用于操作下拉框的展示樣式,回顯內(nèi)容使用的依舊是option內(nèi)部的label。

下拉框樣式

回顯內(nèi)容

關(guān)鍵詞:
返回列表