VantUI官網(wǎng)中給的示例是一個(gè)包含字符串的純數(shù)組,如圖所示:
但是大多時(shí)候,我們需要綁定的都是一個(gè)對象數(shù)組,如果直接使用的話,渲染的效果會顯示為[Object]。
這時(shí)可以利用van-picker自帶的 value-key 屬性,value-key屬性指選項(xiàng)對象中,選項(xiàng)文字對應(yīng)的鍵名。以下面的數(shù)據(jù)為例:
我們希望選擇器展示的是對象中的username屬性,則在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: