东京热成人网站_XX另类XX伦理XXAV_亚洲精品无码成人AAA片_高清av中文字幕无码_手机看片国产欧美日韩高清_bd美妙第进化型

咨詢電話:
15628812133
21
2023/07

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

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

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

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

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

渲染效果

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

數(shù)據(jù)

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

van-picker

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

選擇器

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

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


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

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

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

數(shù)據(jù)

數(shù)據(jù)

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