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

21
2023/07

VantUI中van-picker選擇器綁定數(shù)組對象的使用方法

發(fā)布時(shí)間:2023-07-21 17:49:15
發(fā)布者:MaiMai
瀏覽量:
0

VantUI官網(wǎng)中給的示例是一個(gè)包含字符串的純數(shù)組,如圖所示:

官網(wǎng)數(shù)據(jù)

但是大多時(shí)候,我們需要綁定的都是一個(gè)對象數(shù)組,如果直接使用的話,渲染的效果會顯示為[Object]。

渲染效果

這時(shí)可以利用van-picker自帶的 value-key 屬性,value-key屬性指選項(xiàng)對象中,選項(xiàng)文字對應(yīng)的鍵名。以下面的數(shù)據(jù)為例:

數(shù)據(jù)

我們希望選擇器展示的是對象中的username屬性,則在van-picker中添加如下代碼:

van-picker

這時(shí)可以看到選擇器已經(jīng)展示出username字段的內(nèi)容了:

選擇器

Vant3中使用的是columns-field-names 屬性,可以自定義column結(jié)構(gòu)中的字段。比如想展示username字段,只需要添加如下代碼:

 :columns-field-names="{ text: 'username' }" 


除此之外,我們希望選擇的時(shí)候不止獲取每一列的索引值,還能獲取后臺對象中的id值。

這時(shí)就需要用到vant提供的事件。以confirm為例,當(dāng)我們點(diǎn)擊確定時(shí),@confirm事件會觸發(fā)并傳回value和index兩個(gè)回調(diào)參數(shù)。

由于此時(shí)綁定的是對象數(shù)組,只需要通過value.xxx便可獲取我們想要的字段。如獲取id:

數(shù)據(jù)

數(shù)據(jù)

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